React中useState更新指定人员misc数组qty值的问题求助

你的代码存在两个关键问题导致功能失效：

• 逻辑匹配错误：在person.misc.find中使用key === miscIndex，但此处的key是Person在数组中的索引，和Misc元素的索引完全不匹配，根本无法定位目标元素。
• 违反状态不可变性：直接修改原对象的found.qty += 1，React依赖状态引用的变化触发重渲染，这种原地修改不会让React感知到状态更新。

正确实现方案 #

严格遵循React状态不可变原则，逐层创建副本，仅修改目标元素：

const updatePersonMiscQty = (personIndex, miscIndex) => {
  setPersons(prevPersons => {
    return prevPersons.map((person, idx) => {
      // 非目标Person直接返回原对象
      if (idx !== personIndex) return person;
      
      // 复制目标Person对象，更新其misc数组
      return {
        ...person,
        misc: person.misc.map((item, miscIdx) => {
          // 非目标misc元素直接返回原对象
          if (miscIdx !== miscIndex) return item;
          // 复制目标元素并更新qty
          return {
            ...item,
            qty: item.qty + 1
          };
        })
      };
    });
  });
};

代码说明 #

1. 使用setPersons的函数式更新，确保获取到最新的状态快照prevPersons。
2. 外层map遍历人员数组，仅对personIndex对应的Person执行修改，其余Person直接返回，避免不必要的副本创建。
3. 对目标Person，通过扩展运算符...person创建对象副本，防止修改原状态。
4. 内层map遍历目标Person的misc数组，找到miscIndex对应的元素后，创建副本并更新qty，其余元素保持原样。

调用updatePersonMiscQty(0, 1)即可正确将第一个人员的第二个misc元素的qty值加1，同时保证状态引用更新，触发组件重渲染。

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