Question

我正在使用 React Markdown (https://www.npmjs.com/package/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

Answer 1

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

此处有更多详细信息：

Answer 2

如果这确实是您拥有的唯一代码，那么它看起来很正常。您可能有使用这些组件的其他代码，这就是为什么 in 显示两次。但是根据您现有的代码，没有错误。

Answer 3

这是使用 React.StrictMode 的已知副作用，仅在调试模式下。您可以阅读有关此 here 的更多信息。

<块引用>

严格模式无法自动为您检测副作用，但它可以可以通过使它们更具确定性来帮助您发现它们。这是通过有意重复调用以下函数来完成的：

类组件构造函数、render 和 shouldComponentUpdate 方法
类组件静态 getDerivedStateFromProps 方法
函数组件主体
状态更新器函数（setState 的第一个参数）传递给 useState、useMemo 或 useReducer 的函数

用反应降价渲染太多

3 个答案: