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

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 componentonClick = () => {  // 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 });   }}