React中向嵌套数组添加元素报错：不可迭代问题排查

错误原因 #

直接访问value['Landing Zone Environments']['Azure AD Groups for Access Control']是错误的——Landing Zone Environments是数组类型，不是普通对象，必须先通过传入的索引i获取数组中的对应项，才能访问其内部的Azure AD Groups for Access Control嵌套数组。

修正后的更新函数 #

const handleaddclickinner = (i) => {
  // 复制外层的Landing Zone Environments数组，避免直接修改原状态
  const updatedEnvs = [...value['Landing Zone Environments']];
  // 复制当前索引i对应的环境项里的权限控制数组
  const updatedAccessGroups = [...updatedEnvs[i]['Azure AD Groups for Access Control']];
  // 添加新的空role对象
  updatedAccessGroups.push({ role: "" });
  // 更新当前环境项的权限控制数组
  updatedEnvs[i] = { ...updatedEnvs[i], ['Azure AD Groups for Access Control']: updatedAccessGroups };
  // 整体更新状态
  setValue({
    ...value,
    ['Landing Zone Environments']: updatedEnvs
  });
}

关键说明 #

• 更新嵌套状态时必须逐层复制数组/对象，保证状态不可变性，否则React无法检测到状态变化。
• 用push添加新元素比直接给list[list.length]赋值更规范直观。
• 必须通过索引i定位到具体的Landing Zone Environments项，再操作其内部嵌套数组。

渲染代码注意事项 #

渲染时要正确遍历嵌套数组，给每个项绑定对应索引，示例如下：

{value['Landing Zone Environments'].map((env, envIndex) => (
  <div key={envIndex}>
    <h3>Landing Zone Environment {envIndex + 1}</h3>
    {env['Azure AD Groups for Access Control'].map((group, groupIndex) => (
      <input
        key={groupIndex}
        value={group.role}
        onChange={(e) => {
          // 输入变更处理同样遵循逐层复制原则
          const updatedEnvs = [...value['Landing Zone Environments']];
          const updatedGroups = [...updatedEnvs[envIndex]['Azure AD Groups for Access Control']];
          updatedGroups[groupIndex] = { ...updatedGroups[groupIndex], role: e.target.value };
          updatedEnvs[envIndex] = { ...updatedEnvs[envIndex], ['Azure AD Groups for Access Control']: updatedGroups };
          setValue({ ...value, ['Landing Zone Environments']: updatedEnvs });
        }}
        placeholder="Enter role"
      />
    ))}
    <button onClick={() => handleaddclickinner(envIndex)}>Add Role</button>
  </div>
))}

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