React中更新数组指定id对象的count数组失败，返回undefined求助

原代码的核心错误 #

1. 回调参数理解错误：setCounter的回调参数currCount是整个状态数组，不是单个对象，所以currCount.id === i的判断永远不成立（数组没有id属性），导致状态无法正确更新；若偶然触发判断，还会把数组状态替换成单个对象，彻底破坏结构。
2. 依赖旧状态：直接使用外部的counter[i].count是闭包捕获的旧状态，会导致更新不及时、数据丢失。
3. 返回值错误：原函数没有返回完整的新数组，而是尝试返回单个对象或原数组，不符合状态的数组结构要求。

修正后的代码 #

const [counter, setCounter] = useState([
  { id: 0, count: [] },
  { id: 1, count: [] },
  { id: 2, count: [] }
])

const update = (i, text) => {
  setCounter(currCount => 
    currCount.map(item => 
      item.id === i 
        ? { ...item, count: [...item.count, text] } 
        : item
    )
  );
};

修正说明 #

• 使用map遍历数组，对每个元素进行判断：找到id匹配的元素时，创建新对象（保留原属性，更新count数组），其他元素直接返回。
• 依赖回调参数currCount中的当前元素获取count数组，确保使用最新状态。
• 返回完整的新数组，保持状态的数组结构不变。

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