即使使用 enableReinitialize，Formik FieldArray 也不会重新渲染更新的值答案

【问题标题】：Formik FieldArray not rerendering on updated values even with enableReinitialize即使使用 enableReinitialize，Formik FieldArray 也不会重新渲染更新的值
【发布时间】：2019-07-28 13:32:18
【问题描述】：

Formik enableReinitialize documentation

默认为假。控制 Formik 在 initialValues 更改时是否应重置表单（使用深度相等）。

我正在传递一个我设置的对象（通过道具） initialValues，对象定义为：

{
  "shoppingList": {
    "title": "",
    "items": [ { "quantity": 0, description: "" } ]
  }
}

我在 Formik FieldArray 组件中使用它。我正在使用内联箭头函数更新按钮 onClick 处理程序中的数量，该函数通过items.#map 回调中的当前元素参数直接改变项目。

Formik 不会重新呈现表单以反映更新的数量。 Formik 知道数量，因为当我提交表单时，组件存储数量会重新呈现为正确的更新数量。

【问题讨论】：

标签： reactjs formik

【解决方案1】：

已通过使用 arrayHelpers.#replace 而不是直接更新项目来修复。
arrayHelpers documentation

答案是深度平等是基于价值的。我不确定关于基于引用的平等，深度平等这个术语是否有效，但我的困惑导致我还是这样问。

在这种情况下，直接改变数组中项目对象中的数据或不可变更新都可以按预期工作。不确定如果我更新的数据不是原始数据，这是否会有所不同——对于可怕的 JS 世界来说还是相当新的。

在这种情况下，也可以使用 enableReinitialize 或不使用。

此处的完整工作示例，使用了可变和不可变更新逻辑（一个用于减量，另一个用于加量）： https://codesandbox.io/s/k2wzk9q605?fontsize=14

【讨论】：

感谢您发布该代码框！关于“深度平等是基于价值的”。实际上，答案是“enableReinitialize”是针对不同的情况，您将一个对象传递给initialValues，然后在外部修改该对象。 Formik 对您传递给 initialValues 的内容进行克隆。这个克隆是values。当您更改 values 时，这不会影响您传入的原始对象。因此 enableReinitialize 无关紧要。使取消选项成为可能 - 原始不变。要获得更新，必须对一个值执行setState。 arrayHelpers 方法为您完成了这项工作。

【解决方案2】：

<Formik
    enableReinitialize // <--------------------- missing piece!!
    initialValues={props.initialValues}. 
    render={formProps => {
      return (
        <Form>
          formProps:
          <div>
            Some Elements
          </div>
        </Form>
      );
    }}
  />

https://formik.org/docs/api/withFormik

【讨论】：