React中遍历嵌套数组动态创建隐藏input元素的实现

你可以通过嵌套遍历结合Object.values来处理这个嵌套结构，生成目标隐藏input元素，以下是两种实现方式：

方式一：嵌套map遍历 #

{gridItems.map((item, rowIdx) => {
  return item.fields.map((fieldGroup, groupIdx) => {
    return Object.values(fieldGroup).map((field, fieldIdx) => (
      <input
        key={`row-${rowIdx}-group-${groupIdx}-field-${fieldIdx}`}
        type="hidden"
        name={field.id}
        value={field.value}
      />
    ));
  });
})}

方式二：flatMap扁平化遍历（更简洁） #

{gridItems.flatMap((item, rowIdx) => 
  item.fields.flatMap((fieldGroup, groupIdx) => 
    Object.values(fieldGroup).map((field, fieldIdx) => (
      <input
        key={`row-${rowIdx}-group-${groupIdx}-field-${fieldIdx}`}
        type="hidden"
        name={field.id}
        value={field.value}
      />
    ))
  )
)}

说明 #

1. 第一层遍历gridItems数组中的每一项
2. 第二层遍历每个项里的fields数组（你的结构中每个fields仅含一个对象，该写法兼容多个对象的情况）
3. 用Object.values(fieldGroup)提取出每个字段对应的对象（比如fNameField-0对应的{id: "...", value: "..."}）
4. 最后遍历这些字段对象，生成对应的隐藏input，同时设置唯一的key避免React渲染警告

以上两种方式最终都会生成4个符合要求的隐藏input元素。

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