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

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)中看到它，但实际上并没有更新/刷新上面的 INITIAL_VALUES 或表单。

问题是，当我单击areaInfo数组中的areaName表单字段时，它会刷新并显示我加载的 CVS 数据，但在我 select 加载/解析 csv 文件后不显示它？

我的组件代码如下，使用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数组的推送，但不确定这是否正确，因为在我物理单击该字段之前它不会刷新前端/初始值。

仅供参考，这个PerformUpload组件是从内部调用的：

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

不确定我错过了什么/做错了什么？

Answer 1

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