React动态渲染输入列表时出现输入值不一致的异常问题

你的问题出在两个核心点上：

• 动态渲染的输入框未添加唯一key属性，React无法准确识别每个组件的身份，导致输入时出现DOM复用、状态混乱的情况。
• 更新状态时直接使用当前state展开，受闭包特性影响，可能捕获到旧的状态值，造成状态更新不完整。

直接修改这两处即可解决问题：

const App = () => {
  const [inputs, setInputs] = useState(['name','age','food','gender'])
  const [state, setState] = useState({})
  
  return(
    <div className="">
      {inputs.map((item)=>(
        // 添加唯一key，这里用item本身（确保数组项唯一）
        <input 
          key={item}
          type="text" 
          value={state[item] || ''} // 避免undefined导致输入框闪烁
          placeholder={item} 
          onChange={e =>{
              // 用函数式更新，获取最新的状态快照
              setState(prevState => ({...prevState, [item]: e.target.value }))
            }} 
        />
      ))}
    </div>
  );
}

改动说明： #

1. 添加key属性：React依赖key区分列表元素，无key时会默认用索引匹配，输入框状态变化时容易把错误状态绑定到错误组件上，引发值跳变。这里用数组项item作为key，因为你的输入项（name、age等）都是唯一值，刚好适配。

2. 函数式更新状态：直接用...state时，state是组件渲染时捕获的旧值，短时间多次输入可能覆盖之前的更新。改用prevState => {...}的形式，React会确保每次拿到最新的状态快照，保证更新准确性。

额外添加value={state[item] || ''}是因为初始时state[item]为undefined，会让输入框处于非受控状态，加空字符串可保持输入框始终受控，避免控制台警告。

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