Formik 和 arrayField 与 material ui 的集成

Question

我正在尝试构建 uild 一个 formik/material ui 框架 -- 但数组字段结构似乎无法正常工作。

https://codesandbox.io/s/jovial-albattani-ztf10

当您尝试添加第三个朋友并开始打字时——我收到错误“试图控制不受控制”的问题？

Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

-- 在这些文档中我没有看到这个错误？ https://codesandbox.io/s/github/formik/formik/tree/master/examples/field-arrays?from-embed=&file=/index.js https://formik.org/docs/examples/field-arrays

------------- -- 这是使用 useformik 并且不适用于 arrayfields

https://codesandbox.io/s/boring-kare-ixonw

当我点击“添加成员”时——出现错误“无法读取未定义的属性 'setFormikState'”

我尝试按照这些示例进行操作 - 但我不确定是什么导致了此错误。 https://formik.org/docs/api/fieldarray

我试过使用 fieldArrayHelper - 但它似乎不需要

https://codesandbox.io/s/boring-kare-ixonw?file=/src/_Globals/GeneralFormik/FieldHandler.js

Answer 1

当输入接收到 undefined 值时，React 将其解释为输入不受控制。你可以在这里看到 https://github.com/formium/formik/issues/28.

所以你需要的是在点击 Add a Friend 时初始化一个好友值，像这样 (FieldArrayHandler.js)

<Button
   disabled={parent.disabled}
   variant="contained"
   color="primary"
   type="button"
   onClick={() =>
     arrayHelpers.push({ firstName: "", lastName: "" })
   }
>
   Add a friend
</Button>

并且您可以看到一个正在运行的演示 here

Formik 和 arrayField 与 material ui 的集成

Formik and arrayField integration with material ui

reactjs

yup

formik