ReactJS动态生成输入框无法修改值问题求助

原始数据结构 #

const datos = [{
    tipo1: "11",
    tipo2: "12",
    tipo3: "13",
    tipo4: "14",
    tipo5: "15",
    tipo6: "16"
  },
  { 
    tipo1: "21",
    tipo2: "22",
    tipo3: "23",
    tipo4: "24",
    tipo5: "25",
    tipo6: "26"
  }
];

你的实现代码 #

const [data, setData] = useState(datos);

function updateData(state) {
  console.log(state);
  setData((data) => ({ ...data, ...state }));
}

return (
  <div className="App">
    <form>
      {datos.map(d=>{
        return(<>
        {Object.keys(d).map((key, index) => {
          return (
            <>
              <input
                type="text"
                name={key}
                value={d[key]}
                onChange={(e) => updateData({[key]: e.target.value })}
              />
            </>
            
          );
        })}
      <br/>
      </>);
      })}
    </form>
  </div>
);

问题分析与修复方案 #

你的代码存在三个核心问题：

• 渲染依赖原始数组而非状态：你遍历的是原始数组datos，不是状态data，所以状态更新后页面不会同步刷新最新值。
• 状态更新逻辑错误：data是数组，但你在setData里把它当成对象扩展，会把数组转成以索引为键的对象，直接破坏原有数组结构。
• 缺少唯一key：动态生成元素时未添加唯一key，会导致React渲染异常。

修复后的代码 #

const [data, setData] = useState(datos);

function updateData(itemIndex, key, value) {
  setData(prevData => {
    // 浅拷贝数组，避免直接修改原状态
    const newData = [...prevData];
    // 浅拷贝对应索引的对象，修改指定属性
    newData[itemIndex] = { ...newData[itemIndex], [key]: value };
    return newData;
  });
}

return (
  <div className="App">
    <form>
      {/* 遍历状态数组data，同时获取元素索引 */}
      {data.map((item, itemIndex) => (
        <div key={itemIndex}>
          {Object.keys(item).map((key) => (
            <input
              key={`${itemIndex}-${key}`}
              type="text"
              name={key}
              value={item[key]}
              onChange={(e) => updateData(itemIndex, key, e.target.value)}
            />
          ))}
          <br />
        </div>
      ))}
    </form>
  </div>
);

关键改动说明 #

1. 渲染时遍历状态数组data，确保状态更新后页面同步刷新。
2. 修改updateData函数，通过数组索引定位要修改的对象，用浅拷贝保证状态不可变性，避免直接修改原状态。
3. 给动态生成的元素添加唯一key，用itemIndex和属性名组合确保唯一性。

内容的提问来源于stack exchange，提问作者Germán