如何根据ID更新指定状态？React中tableData状态更新求助

原代码存在几处关键错误，导致无法正确更新状态，以下是修正后的实现：

原代码问题分析 #

• 条件判断逻辑错误：将ele.uniqId与整个tableData数组比较，正确应该和tableEditId匹配
• 状态更新方式错误：setTableData不需要使用展开运算符，map返回的新数组可直接传入
• 数据结构破坏：原代码把对象拆分为数组并新增元素，导致数据结构混乱，应该返回修改后的新对象

修正后的代码 #

else if (tableEditId) {
  console.log(tableData);
  setTableData(tableData.map((ele) => {
    // 匹配待更新的条目
    if (ele.uniqId === tableEditId) {
      // 复制原对象属性，覆盖目标状态字段（这里假设状态字段为state，可根据实际调整）
      return { ...ele, state: state };
    }
    // 未匹配的条目直接返回原对象
    return ele;
  }));
}

代码说明 #

1. 用map遍历tableData数组，遵循不可变更新原则
2. 找到uniqId与tableEditId一致的条目时，通过对象展开运算符复制原有所有属性，再修改目标状态字段
3. 不匹配的条目直接返回原对象，确保其他数据不受影响
4. 直接将map生成的新数组传入setTableData完成状态更新

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