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

标签 reactjs formik

Formik enableReinitialize documentation

Default is false. Control whether Formik should reset the form if initialValues changes (using deep equality).



我正在传入一个我设置的对象(通过 Prop )
initialValues,对象定义为:
{
  "shoppingList": {
    "title": "",
    "items": [ { "quantity": 0, description: "" } ]
  }
}

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

Formik 不会重新渲染表单以反射(reflect)更新的数量。 Formik 知道数量,因为当我提交表单时,组件存储数量会重新呈现为正确的更新数量。

最佳答案

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

答案是深度平等是基于值(value)的。我不确定“深度相等”这个词在基于引用的相等方面是否有效,但我的困惑导致我无论如何都要这样问。

在这种情况下,要么直接改变数组中项目对象中的数据,要么不可变地更新按预期工作。不确定如果我正在更新的数据不是原始数据,这是否会有所不同 - 对于 JS 奇妙而可怕的世界来说还是相当新的。

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

这里是完整的工作示例,使用了可变和不可变更新逻辑(一个用于负数量,另一个用于正数量):
https://codesandbox.io/s/k2wzk9q605?fontsize=14

关于reactjs - 即使使用 enableReinitialize,Formik FieldArray 也不会重新渲染更新的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55030653/

相关文章:

reactjs - 如何使用 redux-thunk 调度操作让 connected-react-router 重定向?

node.js - 将 dockerized Nginx 上的 React App 连接到 Express 服务器

javascript - Yup 中的条件验证

reactjs - 如何创建一个简单的 formik 字段来输入日期和时间?

formik - formik中submit Form、handleSubmit、onSubmit有什么区别?

reactjs - (1) 在提交点击时显示错误,(2) 在模糊/更改时单独显示错误,错误代码为 'touched'

javascript - webpack 的库和客户端应用程序配置

javascript - 为什么 axios 无法在 Android 上的移动 google chrome 上发送 FormData?

reactjs - React 路由器导航不起作用

reactjs - Formik:如何从数组设置初始值?