在parent (react.js)中随机生成的Props有不同的值

Question

React.js中的奇怪行为。当我在props中传递一些随机生成的值时。它在控制台日志中给出了不同的输出。

当我调试它再次回到App.js(父)并检查它的值，但控制台只是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的repo: [e-mail]:senseihimanshu/minesweper .git

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

Answer 1

StrictMode渲染2次以检测开发模式下的副作用

React 17吞噬了一些控制台。第二次呈现期间的日志，只有在启用严格模式时才会发生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和计算值一次渲染。