Question

我正在尝试使用随机状态初始化我的 React 应用程序，但同时开发 I realized that React.StrictMode will try to render your component twice 以查找错误。这会导致控制台的初始打印与屏幕上实际打印的不同。

我是否正确使用了 useState 还是 React 告诉我做其他事情？

代码：
App.js

export function Game(props) {
  const [theSecret, _] = useState(
    Array(4)
      .fill()
      .map(() => getRandomInt(4))
  );
  console.log(theSecret)
  return <button>{theSecret}</button>
}

index.js

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

在这种情况下，您应该使用 useState 延迟初始化

export function Game(props) {
  const [theSecret, _] = useState(() =>
    Array(4)
      .fill()
      .map(() => getRandomInt(4))
  );
  console.log(theSecret)
  return <button>{theSecret}</button>
}

它会阻止随机值在每次渲染中生成

使用 React 时如何初始化随机状态？

1 个答案: