Javascript 使用react markdown渲染过多

我正在使用React Markdown（）在我的NextJS项目中呈现Markdown内容

当我刷新时，我的终端中有两个“toto”和“titi”。。。这是正常的，或者这个代码有什么问题

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

从“下一个/Head”导入Head；
从“react markdown”导入react markdown；
函数节（{data}）{
const content=JSON.parse（data.markdown）；
常数{
标题
分类内容
}=数据；
console.log（'toto'）；
返回(
{title}
{sortContent}
)
}
导出异步函数getServerSideProps（上下文）{
const json=wait import（'../../content/article1/data.json'）；
const content=wait import（'../../content/fr/article1/content.md'）；
控制台日志（'titi'）；
返回{
道具：{
数据：{
标题：json.title\u内容，
sortContent:json.short\u内容，
markdown:JSON.stringify（内容）
}
}
}
}
导出默认部分

如果这确实是您仅有的代码，那么它看起来很正常。您可能有其他代码使用这些组件，这就是为什么在中显示两次。但是根据您的代码，没有bug。

这是使用

React.StrictMode

的已知副作用，仅在调试模式下使用。你可以阅读更多关于这方面的内容

严格模式不能自动检测副作用，但它 通过使它们更具确定性，可以帮助您识别它们。 这是通过故意双重调用以下函数来实现的：

• 类组件构造函数、呈现和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 功能组件体
• 状态更新程序函数（setState的第一个参数）传递给useState、UseMoom或useReducer的函数

---

它是Reacts开发工具的一部分，

StrictMode

。这是预期的，仅适用于开发模式。您可以删除

StrictMode

，以查看它仅渲染预期次数，但显然会丢失一些开发工具。此工具可以警告您某些您可能希望避免的不安全或不明智的做法，例如使用遗留API

详情如下：