为什么此组件在react中渲染两次？

Question

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

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. 为什么它是这样工作的

Answer 1

您的应用程序正在使用StrictMode。查看您的索引。js文件-您的应用程序被包装在

使用StrictMode将导致应用呈现两次，但仅限于开发模式。使用create-react-app创建应用程序将默认启用严格模式。

以下是严格模式的官方文档。

解决方案就是删除

有关更多详细信息，请参阅此相关问题：由于严格模式，我的React组件渲染了两次