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

Posted 2023-02-23

【中文标题】React：使用 array.find 和 array.map 方法设置状态有啥区别？ [复制]

【英文标题】：React: What is the difference in setting state with array.find and array.map methods? [duplicate]React：使用 array.find 和 array.map 方法设置状态有什么区别？ [复制]

【发布时间】：2021-01-29 07:14:12

【问题描述】：

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

我用它来更新 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)

【问题讨论】：

CertainPerformance 在他们的回答中谈论的是什么：Why can't I directly modify a component's state, really?

【参考方案1】：

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

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

【讨论】：

所以 array.find() 返回对通过测试的元素值的引用，而不是该值或元素的副本对吗？

对，对象/数组只有在你明确地这样做时才会被复制，例如JSON.stringify/parse，或.slice，或传播，等等。除非使用少数特定技术之一来克隆对象，否则不会克隆对象。

感谢您的帮助！