即使启用enableReinitialize，Formik FieldArray也不会在更新后的值上重新呈现

Question

Formik enableReinitialize documentation

  

默认为false。控制如果initialValues发生更改（使用深度相等），Formik是否应重置表单。

我要传入的对象（通过道具） initialValues，对象定义为：

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

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

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

Answer 1

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

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

Answer 2

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

答案是深层平等是基于价值的。我不确定深度平等一词对于基于引用的平等是否曾经有效，但我的困惑导致我无论如何都要这样问。

在这种情况下，要么直接更改数组中项目对象中的数据，要么进行不变的更新。不确定如果我要更新的数据不是原始数据，这是否会有所不同-对于令人恐惧的JS世界仍然是相当新的。

在这种情况下，无论是否启用enableReinitialize，都可以使用。

此处是完整的工作示例，同时使用了变异和不变的更新逻辑（一个代表负数量，另一个代表正数量）： https://codesandbox.io/s/k2wzk9q605?fontsize=14