React遍历JSON生成动态表单后如何保存修改并提交完整JSON对象

不需要编写复杂的树形遍历、类型转换逻辑，利用map遍历的索引定位配合React不可变状态更新即可快速实现，完整流程如下：

步骤1：将原始JSON存入组件状态 #

把你拿到的原始结构数据存在组件的状态中，作为表单的数据源：

import { useState } from 'react';

// 原始JSON数据可以是接口请求返回的，也可以是本地定义的
const originalData = {
  "head":"Specialty Milkshakes",
  "sect":[
    {
      "item":"Chocolate Peanut Butter",
      "price":"$5.49"
    },
    {
      "item":"Mint Chocolate Chip",
      "price":"$5.49"
    }
  ]
}

function YourComponent() {
  const [menuData, setMenuData] = useState(originalData);
  // 后续逻辑...
}

步骤2：改造渲染逻辑，绑定更新事件 #

在遍历sect数组时拿到当前项的索引，在输入框的onChange事件中通过索引直接定位要修改的条目，更新状态即可：

{menuData.sect.map((elo, index) => {
  return(
    <React.Fragment key={`frag_${index}`}>
        <Col key={`col1_${index}`} md={5} xs={10} id="Imenu">{elo.item}</Col>
        <Col key={`col2_${index}`} md={1} xs={2} id="Mprice">
          <Form.Control 
            value={elo.price} 
            type="text"
            onChange={(e) => {
              setMenuData(prev => ({
                // 保留外层其他字段不变
                ...prev,
                // 只修改对应索引的sect条目
                sect: prev.sect.map((item, i) => 
                  i === index ? {...item, price: e.target.value} : item
                )
              }))
            }}
          />
        </Col>
    </React.Fragment>
  );
})}

提示：如果存在item字段重复的情况，不要用elo.item作为key，直接用索引或者后端返回的唯一ID即可，避免渲染异常

步骤3：提交时直接使用状态数据 #

状态中的menuData会实时和表单输入同步，提交时直接转成JSON发送给服务端即可，不需要额外处理：

const handleSubmit = async () => {
  await fetch('/你的服务端接口地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(menuData)
  })
}

如果后续你的JSON嵌套层级更深，也可以沿用这个思路：每一层遍历都记录当前层级的索引，更新时逐层匹配索引修改对应项即可，逻辑完全通用，不需要额外编写递归遍历逻辑。

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