Formik 和 arrayField 与材料 ui 的集成

问题描述

我正在尝试构建一个 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 并且不适用于数组字段

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

解决方法

当输入接收 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