Question

我无法理解Formik及其状态管理方式。我的应用程序中有多个具有表单的组件。这些形式在目的上有很多重叠。当我在一个组件中获取值时，我希望其他组件也可以访问这些值。

我已经考虑过对每个值使用useState或useReducer，但是我已经读了一些书，发现Formik管理状态本身吗？因此，我的问题实际上只是访问不同组件中某个组件中“ initialValues”的值吗？

import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

<Formik 
     initialValues={{ name: '', ... }} //how can I use these values in other components? 
                                       //how can I 'save' them so that if the user 
                                       //accesses another page with a form, 
                                       //the data that has already been provided is accessible?

     onSubmit={(values, { setSubmitting }) => {
         setTimeout(() => {
            alert(JSON.stringify(values, null, 2)); 
            setSubmitting(false);
         }, 400)
     }}
>

  <Form>
    <label htmlFor="name">Name</label>
      <Field maxLength="51"
             name="name"  
             type="text" 
      />
      <ErrorMessage name="name" />
      ...
  </Form>

</Formik>

Answer 1

正如道具名称所暗示的，这些只是表单安装时表单的初始值。 Formik确实在跟踪输入值，触摸状态和错误状态以及如何通过控制输入元素更新它们时存储状态。由于Formik在后台使用上下文API，因此Formik状态仅对组件的子级可用。要访问此Formik状态（有时统称为Formik包），可以使用渲染道具图案（example visible here）或useFormikContext钩子

最终，如果您需要多个组件（例如，实现多个不同页面），则需要在不同组件之间转移状态。我建议您不要忽略这样一个事实，您可以在一个组件中包含多个组件，这些组件在页面（example）上以视觉方式分开。如果您确实想在不同组件之间转移状态，则可以通过多种方式进行。

从API保存并重新获取（使用API时适用于不同页面）
保存在React上下文中，该上下文封装了所有需要数据的表单-您可以在“ onSubmit”中更新上下文，或者如果您使用渲染道具，则可以在每次重新渲染时更新上下文（因为任何更改）

如果这样做，您也应该阅读组件上的重新初始化道具-https://jaredpalmer.com/formik/docs/api/formik#enablereinitialize-boolean

在设置之前或之后，如何在不同组件之间共享Formik initialValues？

1 个答案: