React使用Objects.entries动态渲染输入框并修改单个字段值问题

核心问题 #

你的代码存在三个关键错误：

1. 初始状态结构错误：将目标对象包裹在数组中，导致后续状态处理逻辑完全偏离预期
2. 状态更新逻辑错误：错误地将数组条目作为处理对象，修改后把原对象的键替换成了数组索引
3. Key值使用不当：用循环索引i作为元素key，既不符合React最佳实践，也会导致渲染不稳定

修复后的完整代码 #

import React from 'react'

export default function Test() {
  // 修正初始状态：直接存储对象，而非数组包裹对象
  const [exampleState, setExampleState] = React.useState({
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
  });

  // 修正状态更新逻辑：复制原对象后修改指定key的值
  const handleChange1 = (e, key) => {
    // 浅拷贝原状态对象，遵循React状态不可变原则
    const updatedState = { ...exampleState };
    // 更新对应key的输入值
    updatedState[key] = e.target.value;
    // 设置新状态
    setExampleState(updatedState);
  }

  return (
    <div>
      <form>
        {Object.entries(exampleState).map(([key, value]) => {
          return (
            // 使用实际的key值作为元素key，确保渲染稳定性
            <label key={key}>{key} 
              <br/>
              <input 
                type="text"  
                id={key}
                value={value}  
                onChange={(e) => handleChange1(e, key)} 
              />
            </label>
          );
        })}
      </form>
    </div>
  )
}

错误原因详解 #

1. 初始状态问题：原代码中exampleState是一个包含单个对象的数组，Object.entries(exampleState)会返回[[0, {key1: "value1", ...}]]，后续处理把数组索引0当成了键，最终导致状态结构完全混乱
2. 状态更新逻辑问题：原handleChange1函数错误地处理数组条目，强行将所有条目的键设置为当前修改的id，同时把原对象替换成了单个值，最终状态变成了以数字索引为键的结构
3. Key值问题：使用循环索引i作为key，当状态更新时可能导致React无法正确识别元素变化，引发不必要的重渲染或渲染错误

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