时间戳

首页 > 解决方案 > 即使使用 enableReinitialize，Formik FieldArray 也不会重新渲染更新的值

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

问题描述

Formik enableReinitialize 文档

默认为假。如果 initialValues 改变（使用深度相等），控制 Formik 是否应该重置表单。

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

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

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

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

标签： reactjsformik

解决方案

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

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

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

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

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

推荐阅读