reactjs - Formik 和 arrayField 与 Material ui 集成

Question

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

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

当您尝试添加第三个 friend 并开始输入时 - 我收到错误“试图控制不受控制”的问题？

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

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

因此，您需要的是在单击添加 friend 时初始化一个 friend 值，如下所示(FieldArrayHandler.js)

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

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