React组件中isdone状态值无法修改，如何正确实现？

嘿，我来帮你排查下这个问题～你的代码里有两个关键问题导致isdone状态没变化，咱们一步步来改：

问题分析 #

• 逻辑判断错误：你现在是拿this.state.currentItem.key和传入的key做对比，但你要找的是items数组里对应key的项，应该判断item.key === key才对呀！
• 遍历方法用错+setState调用时机不当：map方法是用来生成新数组的，不是用来做遍历判断的。而且在map循环里多次调用setState，会因为React的异步更新特性，导致状态更新混乱，甚至无效。

正确写法 #

方案1：找到对应项后更新isdone #

如果你的需求是只要items里存在对应key的项，就把isdone设为'is-done'，可以用find方法快速定位目标项：

completeItem = key => {
  // 在items数组中查找key匹配的项
  const matchedItem = this.state.items.find(item => item.key === key);
  // 找到匹配项后再更新状态
  if (matchedItem) {
    this.setState({ isdone: 'is-done' });
  }
}

方案2：更高效的存在性判断 #

如果不需要拿到具体的item，只是确认是否存在对应key的项，可以用some方法：

completeItem = key => {
  const hasMatchedItem = this.state.items.some(item => item.key === key);
  if (hasMatchedItem) {
    this.setState({ isdone: 'is-done' });
  }
}

额外优化建议 #

如果你的isdone是用来标记单个item的完成状态，其实把状态存在每个item对象里会更合理，比如把item结构改成{text:'', key:'', isdone: false}，这样可以精准控制每个item的完成状态：

completeItem = key => {
  // 利用函数式更新获取最新的state
  this.setState(prevState => ({
    items: prevState.items.map(item => 
      // 匹配到key时翻转isdone状态，其他项保持不变
      item.key === key ? {...item, isdone: !item.isdone} : item
    )
  }));
}

内容的提问来源于stack exchange，提问作者zac