反应降价过多的渲染 [英] too much render with react markdown

问题描述

我正在使用React Markdown( https://www.npmjs.com/package/react-markdown) 在我的 NextJS 项目中呈现 Markdown 内容.

I am using React Markdown (https://www.npmjs.com/package/react-markdown) to render markdown content in my NextJS project.

刷新时，我有两个"toto"&蒂蒂"在我的终端中...这是正常现象还是此代码出了什么问题?

When I refresh I have two "toto" & "titi" in my terminal... It is normal or what's wrong with this code?

import Head from 'next/head';
import ReactMarkdown from 'react-markdown';

function Section ({ data }) {

  const content = JSON.parse(data.markdown);

  const {
    title,
    sortContent
  } = data;

  console.log('toto');

  return (
    <>
      <main>
        <h1>{title}</h1>
        <h1>{sortContent}</h1>
        <ReactMarkdown source={content.default} escapeHtml={false} />
      </main>
    </>
  )
}

export async function getServerSideProps (context) {

  const json = await import('../../content/article1/data.json');
  const content = await import('../../content/fr/article1/content.md');

  console.log('titi');

  return {
    props: {
      data: {
        title: json.title_content,
        sortContent: json.short_content,
        markdown: JSON.stringify(content)
      }
    }
  }
}

export default Section

推荐答案

它是Reacts开发工具 StrictMode 的一部分.这是预期的，仅适用于开发模式.您可以删除 StrictMode 以查看它仅呈现预期的次数，但是显然您会丢失一些开发工具.此工具可以警告您某些您可能要避免的不安全或不明智的做法，例如使用旧版API.

It's part of Reacts development tooling, StrictMode. It is expected and only applies in development mode. You can remove the StrictMode to see it only render the expected number of times, but obviously you lose some development tooling. This tooling can warn you about certain unsafe or unwise practices you might want to avoid such as using legacy APIs.

此处有更多详细信息:

• Reactjs文档
• 具有良好概述的博客

这篇关于反应降价过多的渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！