Question

我正在学习反应并试图了解如何更好地处理使用数组更新组件的状态。这是我在组件componentWillMount()上调用的函数，用于生成稍后在此父组件中呈现的组件：

  generateThings = () => {
    let newThings = [];
    for (let j = 0; j < this.state.numberOfThings; j++) {
      const pos = this.generatePosition(1, 1);
      const thingComp = <Thing key={j} position={pos} />;
      newThings.push(thingComp);
    }
    this.setState({
      things: newThings
    });
  };

我认为更好的方法是直接push()到状态字段（this.state.things.push(thingComp);）而不是存储在看起来更混乱的临时变量中。但这似乎没有触发UI更新，所以我猜这是做到这一点的方法，但我不确定。

Answer 1

你在做什么是正确的。

当您致电setState时，会导致组件重新呈现：根据React Docs

setState（）将对组件状态的更改排入队列并告知React   这个组件及其子组件需要重新呈现   更新状态

不要直接改变this.state，因为之后调用setState（）可能   替换你所做的突变。把它当作状态对待   不可变的。

如果您需要更新/推送到现有的things阵列：

let things = this.state.things.slice(); // make a copy

//push or do whatever to the array
things.push(thingComp)

this.setState({ things: newThings });

Answer 2

此外，如果需要，您可以设置状态而无需推送和切片到其他数组。

CodeSandbox：https://codesandbox.io/s/jn8w8w34n3

the additional array solution is commented

使用React正确更新组件状态中的数组

2 个答案: