javascript - Array.prototype.map() 需要来自箭头函数 array-callback-return 的返回值

Question

真的不知道为什么这么说，但这是我相信它正在谈论的代码

setUpdate(text, key) {
  const items = this.state.items;
  items.map((item) => {
    if (item.key === key) {
      item.text = text;
    }
  });
  this.setState({
    items: items,
  });
}

Answer 1

问题

Array.prototype.map函数映射一对一关系，生成的数组将与原始数组的长度相同。该错误表明您没有显式返回每个迭代元素的值。

您也不保存生成的映射数组。代码的结果是对 items 的迭代数组和突变 item.text = text; 。在 React 中，state 和 props 被认为是不可变的，直接改变它们是非常反模式的。

setUpdate(text, key){
  const items = this.state.items; // <-- saved state reference
  items.map(item=>{ // <-- missing result array save
    if(item.key===key){
      item.text= text; // <-- state mutation!
    }
    // <-- missing return value (the error)
  })
  this.setState({
    items: items // <-- same reference to previous state!
  })
}

解决方案

您将需要浅复制数组以及正在更新的任何嵌套对象。使用功能状态更新从前一个状态的状态数组正确创建下一个状态数组。这样做的原因是下一个版本的items 必然取决于之前的数组。

setUpdate(text, key) {
  this.setState((prevState) => ({
    items: prevState.items.map((item) =>
      item.key === key ? { ...item, key: text } : item
    )
  }));
}