React：使用 array.find 和 array.map 方法设置状态有什么区别？ [复制]

Question

使用以下方法有什么区别？

我用它来更新 React 组件状态：

changeRate(id, rate) {
  let color = this.state.colors.find((c) => c.id == id);
  color.rating = rate;
  this.setState({ color });
}

在我正在关注的书中，这是使用的：

rateColor(id, rating) {
    const colors = this.state.colors.map(color =>
    (color.id !== id) ? color : { ...color, rating })
    this.setState({colors})
}

Answer 1

如果您使用第一种方法，您将改变现有状态，这可能会导致不可预知的行为（例如无法重新渲染），并且在 React 中永远不应该这样做。

第二种方法不会改变现有的状态——你正在创建一个全新的颜色对象，当需要在 React 中更新状态时应该这样做。