javascript - react.js 在更改状态数组后不更新 DOM

Question

我正在尝试在 React 中实现一个游戏，其中我在父类的初始状态下将棋盘作为二维数组。通过遍历该数组来呈现图 block 。我将一个函数作为 Prop 传递给这些 child ，以便他们可以更改该状态数组。

现在，当我使用该函数更改数组时，HTML 不会更新。当我调用 setState 但它永远不会重新呈现时，数组会得到更新。我尝试了 this.forceUpdate() 但仍然没有运气。然后我所做的是通过该函数将一个函数从那个 child 传递给父级以更新该子级的状态并且这是有效的，但我需要父级的函数递归调用自身以更新板。我觉得我可能遇到了反模式。请问如何更改我的代码以使 DOM 更新？

缺少零件，但这些是所有涉及的组件。 statusBoard 是具有解决方案的板的内部版本。我希望这是清楚的。

Answer 1

每当你将 props 和 state 连接在一起时，你必须像这样创建一个 componentWillReceiveProps 函数:

componentWillReceiveProps: function(nextProps) {
    this.setState({
      positionX: nextProps.columnPosition,
      positionY: nextProps.rowPosition
    });
  }

当游戏状态发生变化并将其作为 Prop 传递给 Field 时，Fields 自身的内部状态此时不会更新，因为它依赖于自己的状态。这是一种反模式，你应该避免 Field 必须有任何状态，而只依赖于它传递的 Prop ，并有一个处理所有状态的父组件。

https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html