道具对于父级（react.js）中随机生成的道具具有不同的值

Question

在反应中的怪异行为。js。当我在道具中传递一些随机生成的值时。它在控制台日志中提供不同的输出。

当我调试时，它会再次返回到应用程序。js（Parent）并检查其值，但控制台只有2个，而不是4个。

我在反应生命周期中错过了什么？

// App.js
function App() {
  const rand = Math.random();
  console.log(rand);
  return (
    <div className="App">
      <Board rand={rand} />
    </div>
  );
}

export default App;

// Board.js
function Board({ rand }){
    console.log(rand);
    return(
        <div className="Board"></div>
    );
}
export default Board;

以下是github回购协议：[e-mail]：senseihimanshu/扫雷舰。吉特

请检查App.js和Board.js以进一步澄清，并在开发工具的控制台中验证这两个数组不相同...这就是问题所在。

Answer 1

做出反应。StrictMode渲染2次以检测开发模式中的副作用

React 17在第二次渲染期间吞下一些console.logs，这只发生在启用严格模式时https://github.com/facebook/react/issues/20090#issuecomment-715926549

代码参考：https://github.com/facebook/react/blob/7cb9fd7ef822436aef13c8cbf648af1e21a5309a/packages/react-reconciler/src/ReactFiberClassComponent.old.js#L170

如何解决https://github.com/facebook/react/issues/20090#issuecomment-715927125

不过，视图将保持一致，最好使用useEffect并在渲染时计算一次值。