如何在React状态的嵌套对象数组中更新age数组？

要更新这个嵌套结构里的age数组，必须遵循React状态不可变更新的原则——不能直接修改原状态对象，需要逐层创建副本并替换目标值。以下是具体实现代码：

// 假设parameterData是已定义的变量
const [varient, setVarient] = useState([
  { id: 0, targets: { ageGender: { age: [], gender: [] }, parameterData } },
]);

// 更新age数组为[12,13]的方法
const updateAgeArray = () => {
  setVarient(prevVarient => {
    // 遍历原数组，匹配目标项（此处仅id=0的项）
    return prevVarient.map(item => {
      if (item.id === 0) {
        // 逐层浅拷贝，仅替换age数组，保留其他属性原值
        return {
          ...item,
          targets: {
            ...item.targets,
            ageGender: {
              ...item.targets.ageGender,
              age: [12, 13]
            }
          }
        };
      }
      // 非目标项直接返回原对象
      return item;
    });
  });
};

核心要点： #

• 用setVarient的回调函数更新，确保基于最新状态操作
• 通过**扩展运算符（...）**逐层拷贝嵌套结构，避免直接修改原状态导致React无法检测变化
• 仅修改age数组，保持gender、parameterData等其他属性不变

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