如何在React中用setState更新嵌套数组的parameter值（无第三方库）

原实现存在的问题 #

• 数组结构破坏：prev.map遍历外层数组时，仅在index1 === idx时返回新对象，其余情况未返回原元素，会导致新数组对应位置变成undefined，直接破坏原有state结构。
• 冗余计算：通过fil = obj.targets.parameterData.map(...)已经生成了修改后的parameterData数组，后续的const p = ...属于完全多余的操作，既浪费性能又增加代码复杂度。
• 无效代码：解构了event.target.name但未使用，属于无意义的代码。

更优实现方式 #

下面是逻辑清晰、符合React不可变性原则的实现，没有冗余操作，同时保证state结构完整：

const handleChangeTextParameter = (event, index, idx) => {
  const { value } = event.target;

  setState((prevState) => {
    // 遍历外层数组，逐个处理每个元素
    return prevState.map((item, itemIndex) => {
      // 非目标元素直接返回原对象，避免不必要的拷贝
      if (itemIndex !== idx) return item;

      // 拷贝当前对象的targets，确保不修改原对象
      const updatedTargets = {
        ...item.targets,
        // 遍历parameterData数组，修改目标元素的parameter字段
        parameterData: item.targets.parameterData.map((param, paramIndex) => {
          if (paramIndex !== index) return param;
          // 拷贝目标元素并更新parameter值
          return { ...param, parameter: value };
        })
      };

      // 返回拷贝后的新对象，替换原数组中的目标元素
      return { ...item, targets: updatedTargets };
    });
  });
};

实现说明 #

1. 严格遵循不可变性：所有层级的修改都基于对象/数组的浅拷贝，不会直接修改原state中的任何数据，符合React state更新的要求。
2. 逻辑清晰无冗余：仅在需要修改的层级进行拷贝和更新，其余元素直接复用原对象，性能更优。
3. 完整处理所有分支：遍历过程中每个分支都有明确的返回值，不会出现数组元素丢失或变为undefined的情况。

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