React中ChildComponent按索引渲染片段时input输入值自动同步的原因及解决办法

异常同步问题的核心产生原因 #

这个现象本质是React 虚拟DOM Diff 机制的节点复用规则导致的，和你的输入监听逻辑没有关系：

• React在做同层级的DOM对比时，判断是否需要重建DOM的依据只有两个：元素的JSX类型、元素自身设置的key值。只要两个元素类型相同、没有设置区分性的key，React就会直接复用之前已经存在的DOM节点，只更新节点上变化的HTML属性，不会重新创建新的DOM实例。
• 你的代码里两个input元素都没有设置key，哪怕它们的HTML id属性完全不同，React也会把它俩当成同一个可复用的节点。实际运行时页面上从头到尾只有一个input DOM实例，只是根据传入的index，反复修改这个实例的id、绑定的事件等属性，你在这个节点上输入的内容会一直保留在DOM的value缓存里，当你切换显示另一个input片段时，缓存的输入值还在，看起来就像两个input的内容自动同步复制了。
• 很多开发者会误以为HTML的id属性是区分节点的依据，但React根本不会读取DOM上的原生id属性做节点判定，这也是这个问题容易被忽略的原因。

可落地的修复步骤 #

• 核心修复：给fragments数组里的每个元素设置全局唯一、稳定的key值，明确告知React不同片段的input是独立节点，禁止复用。修改后的fragments写法：

const fragments = (onChangeHandler) =>
  [
    <input 
      key="screen1_input1" 
      type="text" 
      id="screen1_input1" 
      onChange={onChangeHandler} 
    />,
    <input 
      key="screen2_input1" 
      type="text" 
      id="screen2_input1" 
      onChange={onChangeHandler} 
    />
  ];

只要加上区分性的key，当你切换index渲染不同片段时，React发现前后两个input的key不一样，就会正确卸载旧的input节点、挂载全新的input节点，自然不会出现内容残留同步的问题。

• 配套优化：如果使用受控组件的写法，需要把每个input的value属性和状态中对应id的字段绑定，保证DOM显示内容和状态完全一致，避免后续出现状态和视图不匹配的问题：

// ChildComponent内的onChange逻辑优化
const onChange = e => {
  const { target: { id, value } } = e;
  setContentData(prev => ({
    ...prev,
    [id]: value
  }));
};

// 渲染input时绑定对应状态值（以第一个input为例）
<input 
  key="screen1_input1" 
  type="text" 
  id="screen1_input1" 
  value={contentData.screen1_input1 || ''}
  onChange={onChange} 
/>

• 避坑提示：后续写动态渲染的列表元素、多片段切换的元素时，不要省略key属性，也不要直接用数组下标作为key；只要同位置会出现同类型的不同元素，就必须给元素设置能唯一标识自身的key，从根源上避免错误的DOM复用。

内容的提问来源于stack exchange，提问作者S.W.