React官方文档中编辑联系人表单切换不更新的问题咨询

核心原因 #

React默认会复用相同DOM位置的组件实例，保留组件内部的state——哪怕上层传入的props已经变化。你遇到的情况就是：切换联系人时，编辑表单组件的位置没改，React复用了旧的组件实例，而这个实例的内部state还是之前编辑的旧联系人数据，所以表单不会自动刷新成新联系人的值。

你能理解“表单不重置”的场景，本质是React帮你保留了输入状态；但这个场景需要表单跟着选中的联系人更新，矛盾点就在于：组件内部state没有和新传入的props同步。

两种解决方法 #

• 用key强制刷新组件：给编辑表单组件添加一个和选中联系人绑定的key（比如联系人的id）。当切换联系人时，key值变化，React会销毁旧组件实例，创建全新的实例，新实例会用新的联系人props初始化表单state，自然显示最新内容。

  <ContactForm key={selectedContact.id} contact={selectedContact} />
  

• 监听props更新同步state：在表单组件内部，用useEffect监听传入的contact props，当props变化时，手动更新表单的内部state。

  useEffect(() => {
    // 当选中的联系人变化时，把表单数据同步为新联系人的值
    setFormData(contact);
  }, [contact]); // 依赖项设为contact，确保props变化时触发
  

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