Question

在previous 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

仅更改状态不会触发重新渲染。您需要调用setState()函数：

// class component
onClick = () => {
  // update state
  this.setState(newState);
}

// functional component
...
  const [ state, setState ] = useState();

  ...

  setState(newState);

此外，执行不可变状态更新也非常重要，因为React通常依赖于引用（尤其是在使用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 2

编写反应代码时，请避免使用不纯函数。在此，拼接是不纯净的方法。我建议使用以下代码：

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 }); 
  }
}

Answer 3

我假设您已经将该阵列保存到了您的状态。然后您可以执行以下操作：

onClick = (idx) => {
  let arr = [...this.state.arrayToModify];
  arr.splice(idx,1);
  this.setState({ arrayToModify: arr });
}

希望这会有所帮助！

Answer 4

我需要复制数组：

let arr = appState.chosenBets
arr.splice(index, 1)
appState.chosenBets = arr

不是简单地做

data.chosenBets.splice(index, 1);

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

4 个答案: