时间戳

首页 > 解决方案 > 为什么这个组件在反应中渲染两次？

reactjs - 为什么这个组件在反应中渲染两次？

问题描述

我有一个组件，我设置了一个计数并在单击按钮时让状态更新。但是当我检查渲染时间时，每次单击按钮时它都会渲染两次。

https://codesandbox.io/s/brave-forest-yre6y?file=/src/App.js

export default function App() {
  const cute = Array(10).fill({});
  const [count, setCount] = useState(2);
  console.log(count);
  return (
    <div className="App">
      <button
        onClick={() => {
          if (count < 10) setCount(count + 1);
        }}
      >
        add
      </button>
      {cute.map((data, index) => {
        if (index < count) {
          return (
            <div>
              <p>{index}. Luna is cute</p>
            </div>
          );
        }
      })}
    </div>
  );
}

我想知道：

  1. 为什么它会这样工作？
  2. 我怎么能防止这种情况？

标签： reactjs

解决方案

您的应用正在使用StrictMode. 查看您的index.js文件 - 您的应用程序包含在一个<React.StrictMode>元素之间。

使用StrictMode将导致您的应用程序渲染两次，但仅在开发模式下。默认情况下，创建应用程序create-react-app将启用严格模式。

这是严格模式的官方文档。

解决方案只是删除<React.StrictMode>，但这也会禁用它的一些优点，所以如果它不打扰你，我会保持原样，知道它不会在生产中呈现那样。

有关更多详细信息，请参阅此相关问题：My React Component is rendering two because Strict Mode

推荐阅读