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

react.js does not update DOM after having changed state array

本文关键字：更新 DOM 数组 状态 js 改变 react      更新时间：2023-09-26

我试图在react中实现一个游戏，我在父类的初始状态中将棋盘作为二维数组。通过迭代该数组来呈现tile。我把这些子函数作为道具传递给它们，这样它们就可以改变状态数组。

现在，当我使用该函数更改数组时，HTML不会更新。当我调用setState时，数组得到更新，但它从不渲染。我尝试了this.forceUpdate()，但仍然没有运气。然后我所做的是通过函数将子函数传递给父函数来更新子函数的状态，这是可行的，但我需要父函数递归地调用自己来更新棋盘。我觉得我可能碰到了一个反模式。我怎么能改变我的代码，以便DOM更新，请?

有部分缺失，但这些都是相关的组件。statusBoard是解决方案的内部版本。

当你把props和state链接在一起时，你必须创建一个componentWillReceiveProps函数，如下所示:

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

当游戏状态改变并将其作为道具传递给Field时，Field自己的内部状态在那时不会更新，因为它依赖于自己的状态。这是一个反模式，你应该避免Field必须有任何状态，只依赖于它的props，它被传递，并有一个父组件来处理一切的状态。

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

相关文章：