条件渲染两个Formik组件时initialValues不更新的原因是什么

核心是React的组件复用机制和Formik的设计逻辑共同导致的： #

• React虚拟DOM Diff规则：同层级下相同类型的组件，如果没有显式指定不同的key属性，React会直接复用现有组件实例，而非销毁旧实例重建新实例。你写的两个条件分支返回的都是<Formik>组件，类型完全一致，没有指定key，所以切换state的时候React只会复用同一个Formik实例，仅更新它的props。
• Formik的initialValues设计：initialValues是仅在Formik组件初始化时读取一次的参数，属于初始化配置而非受控属性。当组件实例已经创建完成后，哪怕props传入的initialValues发生变化，Formik内部也不会主动更新自身维护的表单状态。

给两个分支的Formik组件添加不同的key值即可，示例：

{state ? (
  <Formik
    key="form1"
    initialValues={{
      firstName: "",
      lastName: "",
      email: ""
    }}
    {/* 其余属性保持不变 */}
  >
  {/* 表单内容 */}
  </Formik>
) : (
  <Formik
    key="form2"
    initialValues={{
      fn: "",
      ln: ""
    }}
    {/* 其余属性保持不变 */}
  >
  {/* 表单内容 */}
  </Formik>
)}

添加不同key后，React会判定这是两个不同的组件，切换时会销毁旧的Formik实例，新建新的实例，新实例就会读取对应分支的initialValues完成初始化。

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