如何使用反应正确更新数组中的状态？

Question

在上一个问题中，我得到了有关如何更新数组的答案，这是通过以下方式实现的：onClick(obj, index) {  if (data.chosenBets[index]) {    // Remove object.    data.chosenBets.splice(index, 1);  } else {    // Add object.    data.chosenBets.splice(index, 0, obj);   }}这不会在我的 UI 中触发重新渲染。如何在触发重新渲染时更新数组（以与上述相同的方式）？

Answer 1

我假设您已经在您的州保存了该数组。然后你可以做这样的事情：

onClick = (idx) => {

  let arr = [...this.state.arrayToModify];

  arr.splice(idx,1);

  this.setState({ arrayToModify: arr });

}

希望这可以帮助！

Answer 2

只是改变一个状态不会触发重新渲染。您需要调用setState()函数：

// class component

onClick = () => {

  // update state

  this.setState(newState);

}

// functional component

...

  const [ state, setState ] = useState();

  ...

  setState(newState);

此外，执行不可变状态更新非常重要，因为 React 通常依赖于 refs（尤其是在使用memo()或 时PureComponent）。因此，最好使用相同的项目创建新的数组实例。

onClick(obj, index) {

  let newData;

  if (data.chosenBets[index]) {

    newData = data.slice();

    newData.chosenBets.splice(index, 1);

  } else {

    newData = [ obj, ...data ]; 

  }

  setState(newData);

}

并且您始终可以使用一些库进行不可变更新，例如immer、object-path-immutable等。

Answer 3

在编写 React 代码时尽量避免使用不纯函数。在这里，拼接是一种不纯的方法。我建议使用以下代码：

onClick(obj, index) {

  if (this.state.data.chosenBets[index]) {

    // Remove object.

    const data = {

        ...this.state.data,

        chosenBets: this.state.data.chosenBets.filter((cBet, i) => i !== index)

    };

    this.setState({ data });

  } else {

    // Add object.

    const data = {

        ...this.state.data,

        chosenBets: [ ...this.state.data.chosenBets, obj ]

    };

    this.setState({ data }); 

  }

}