我遇到了一个奇怪的错误，这是我在 react 项目(也是 meteor )中从未见过的，并对其进行了研究，但没有找到任何可以帮助我解决它的方法。基本上我得到这个错误:
组件的子组件不应发生突变。位于组件的以下 3 个元素上。
<h4>Team's defense: {defense}%</h4>
<h4>Team's offense: {offense}%</h4>
<h4>Team's total: {total}%</h4>
所以基本上我从父组件传递一个玩家数组，并使用这个玩家列表( Prop )在子组件上执行一大堆公式，如下所示。
// PLAYMAKING RISKS
const playmakingRisks = Math.round((players.reduce((playmakingRisks, player) => {
return playmakingRisks + player.playmakingRisks;
// calculating below the total potential score of the team
}, 0) / (3 * numPlayers)) * 100);
// TOTALS
const defense = Math.round((duelTackling + fieldCoverage + blocking + gameStrategy + playmakingRisks)/5);
const offense = Math.round((kicking + ballManipulation + passing + fieldCoverage + gameStrategy + playmakingRisks)/6);
const total = Math.round((kicking + ballManipulation + passing + duelTackling + gameStrategy + fieldCoverage + blocking + playmakingRisks)/8);
这 3 个 const 已经在玩家 View 的状态中使用，因此尝试了不同的方法来查看是否可以修复它，我更改了这 3 个变量的名称，但没有成功。我什至使用console.log(typeof playmakingRisks);检查了所有变量，以确保它们是数字。
我没看到什么？
最佳答案
我发现您正在进行数学计算，因此有时您的值之一很可能是NaN。确保它不是 NaN 就可以了。
您可以在这里阅读更多信息:https://github.com/facebook/react/issues/7424
关于javascript - react : Component's children should not be mutated，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40177253/