通过数组推送更新 Formik initialValues 不会通过 csv 文件上传刷新初始 values/form

Question

我有以下 Formik 初始值设置：

const INITIAL_VALUES = {
  taskName: 'Test',
  taskNotes: 'Some notes',
  areaGroups: [
     {
       name: Area Group 1,
       areaInfo: [
          {
             areaName: "Area 1",
             areaCode: null
          }
       ]
    }
 ]
};

然后我正在做的是为用户提供加载 CSV 文件的选项，以避免用户通过前端表单输入更多 areaInfo 数据。

下面的代码似乎将加载的 CSV 值添加到 areaInfo 数组，我可以从 console.log(values) 中看到，但实际上 update/refresh INITIAL_VALUES ] 以上或表格。

不过，当我单击 areaInfo 数组中的 areaName 表单字段时，它会刷新并显示我加载的 CVS 数据，但在我 select csv 文件到 load/parse?

我的组件代码如下，使用的是 react-dropzone 和 papaparse npm 包：

const PerformUpload = ({ values }) => {

    const formikProps = useFormikContext()  
    const classes = useStyles();

    const onDrop = useCallback(acceptedFiles => {      
        acceptedFiles
            .filter((file) => file.type === "text/csv")
            .forEach(async (file) => {
                const text = await file.text();
                const result = parse(text, { header: true });
                const myData = result.data

                myData.map((data) => (
                  values.areaGroups[0].areaInfo.push(
                      {
                        "areaName": data.areaname,
                        "areaCode": data.areacode
                      }
                  )
                ))
            });            
      }, []);  
    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });  

    return (
        <React.Fragment>
         <section className="container">
          <div {...getRootProps({className: 'dropZone'})}>      
            <input {...getInputProps()} />
            <p>Drag files here or click to select a file</p>
          </div>
        </section>
        </React.Fragment>
      )      
  }

我正在向 values.areaGroups[0].areaInfo 数组执行推送，但不确定这是否正确，因为在我实际单击该字段之前它不会刷新 frontend/initial 值。

仅供参考，正在从内部调用此 PerformUpload 组件：

<Formik
   enableReinitialize={true}       
   initialValues={INITIAL_VALUES}
   ....

不确定我是什么missing/doing错了吗？

Answer 1

在将数据推送到我的初始值之前，我设法通过使用 Formik 的 setFieldValue 解决了我的问题。

通过数组推送更新 Formik initialValues 不会通过 csv 文件上传刷新初始 values/form

Updating Formik initialValues via array push does not refresh initial values/form via csv file upload

javascript

reactjs

papaparse

formik