React可复用Confirmable输入组件多次复用的异常问题排查

先给你拆解下这两个关联问题的根源，以及对应的解决办法：

1. 多次复用组件时输入值无法修改的原因 #

这种情况最常见的是缺少唯一的key属性或者组件内部state没有做实例隔离：

• 当你在同一父组件内多次渲染Confirmable组件时，如果不给每个实例分配唯一的key，React的虚拟DOM diff算法会错误地复用组件实例和它们的状态，导致输入值互相干扰、无法正常更新。
• 另一种可能是Confirmable组件内部的state没有做实例隔离（比如误用了全局变量或者共享的引用类型状态），多个组件实例共用了同一份状态，自然会出现输入值串位的问题。

2. TypeError: Cannot read property 'name' of null的根源 #

这个错误是因为React合成事件的事件池机制导致的：
React会复用合成事件对象，在事件回调函数执行完成后，会清空事件对象的属性（包括target），把它放回事件池。如果你的handleUserInput函数里存在异步操作（比如setState的回调、Promise等），或者你在回调中延迟访问了e.target，就会出现e.target变为null的情况。
结合你移除一个组件就正常的情况，也可能是多个组件实例的事件绑定上下文混乱，导致事件对象被意外回收。

具体解决步骤 #

解决输入值无法修改的问题 #

• 给每个复用的Confirmable组件添加唯一的key属性，比如：

  <Confirmable key="user-name-input" />
  <Confirmable key="user-email-input" />
  

  确保key是每个实例独有的，不要用列表索引（除非列表不会重新排序），最好用业务相关的唯一标识。
• 检查Confirmable组件内部的state定义，确保每个实例都有自己独立的state，不要使用共享的外部变量作为状态。

解决e.target为null的错误 #

• 在事件回调的开头，先把需要的属性提取出来，避免后续访问被回收的事件对象：

  const handleUserInput = (e) => {
    // 先提取name和value，避免e.target被回收
    const { name, value } = e.target;
    setState(prev => ({
      ...prev,
      [name]: value
    }));
  };
  

• 如果你的回调里有异步操作，还可以调用e.persist()来阻止React回收事件对象（不过官方更推荐上面提取属性的方式，因为persist()会增加内存开销）：

  const handleUserInput = (e) => {
    e.persist(); // 阻止事件对象被回收
    someAsyncOperation().then(() => {
      setState(prev => ({
        ...prev,
        [e.target.name]: e.target.value
      }));
    });
  };
  

额外排查点 #

如果上面的方法还没解决，检查下Confirmable组件的props传递是否正确，比如是否把name属性正确传递给内部的input元素，有没有出现多个input共用同一个name的情况——这也会导致state更新时出现混乱。

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