如何重构表单input的map渲染逻辑，避免修改值时输入框失焦

根因分析 #

输入框自动失焦的核心原因是每次状态更新后，React 识别到输入框对应的元素是全新的组件实例，直接卸载旧实例再挂载新实例，触发失焦。常见触发场景有两类：

• 抽离渲染逻辑时，没有给每个动态渲染的input加唯一稳定的key属性
• 抽离的渲染逻辑写成了主组件内部的嵌套函数组件，每次主组件重渲染时都会重新声明这个函数，导致组件引用每次都变，React 判定为不同组件直接销毁重建

另外你贴的原代码里onChange后缺少等号，属于语法笔误，实际运行记得修正为onChange={(e) => stateHandler(e,index)}。

修复方案 #

方案1：添加唯一稳定的key #

不要用map的index作为key（数组顺序变动时index不稳定），优先用业务唯一ID，没有的话可以在初始化数组时给每个项加固定的随机ID，示例：

// 初始化数组时给每个项加唯一id
const [arrState, setArrState] = useState(() => 
  初始数组.map(item => ({ value: item, id: Math.random().toString(36).slice(2) }))
)

// 渲染时用id作为key
arrState.map((obj, index)=>{
  return(
     <input 
       key={obj.id}
       type="text" 
       value={obj.value} 
       onChange={(e) => stateHandler(e, index)}
     />
  )
})

方案2：将抽离的组件移到主组件外部声明 #

不要把抽离的输入项组件嵌套在主组件内部，避免每次重渲染生成新的组件引用，示例：

// ✅ 放在主组件外部，引用固定不会变
const InputItem = ({ value, onChange }) => {
  return <input type="text" value={value} onChange={onChange} />
}

function FormMain() {
  // ❌ 不要放在这里，每次FormMain重渲染都会生成新的InputItem，触发销毁重建
  // const InputItem = () => {}

  return (
    <form>
      {arrState.map((obj, index) => (
        <InputItem 
          key={obj.id}
          value={obj.value} 
          onChange={(e) => stateHandler(e, index)} 
        />
      ))}
    </form>
  )
}

方案3：用useCallback缓存内部渲染函数 #

如果因为逻辑耦合必须把渲染逻辑放在主组件内部，用useCallback缓存函数引用，保证依赖不变的情况下引用不会变：

function FormMain() {
  // 注意stateHandler也需要用useCallback包裹，避免依赖变动导致缓存失效
  const renderInput = useCallback((obj, index) => {
    return (
      <input 
        key={obj.id}
        type="text" 
        value={obj.value} 
        onChange={(e) => stateHandler(e, index)} 
      />
    )
  }, [stateHandler])

  return <form>{arrState.map(renderInput)}</form>
}

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