带有 FetchBaseQuery 的 Formik答案

【问题标题】：Formik with FetchBaseQuery带有 FetchBaseQuery 的 Formik
【发布时间】：2022-11-01 16:36:31
【问题描述】：

我有一个用 Formik 构建的表单。表单有一个初始输入框，用户应该在其中输入他的用户名，如果用户名有效，那么 API 将返回用户的后续详细信息，我需要在表单中进一步预先填写。

有没有更好的方法在 Formik 中处理它。我探索并发现我可以使用initialValues，但我需要稍后对其进行初始化。

表单如下所示，但有更多细节要显示

此外，如果用户没有用户名，那么我们也可以让用户手动输入详细信息并单击提交。

我尝试了以下方法，但现在我认为这不是问题的最佳解决方案，请您帮我处理此类用例

 const response = useQuery(username,{skip});
 const userData: any = response?.data;
 const formikRef = useRef<FormikProps<FormikValues>>(null);
 React.useEffect(() => {
    if (userData) {
        formikRef.current?.setFieldValue("name", userData.name);
        formikRef.current?.setFieldValue("detail1",userData.detail1);
        formikRef.current?.setFieldValue("detail2",userData.detail2);
      } 
  }, [agreementLineData]);
 return (
    <Formik
      innerRef={formikRef}
      initialValues={{
        username: "",
        name: "",
        detail1: "",
        detail2: ""
      }}
      onSubmit={(values) => {})
      {({ values, submitForm, setFieldValue }) => {
        return (
           <Form>
             <FormField label="Username">
                 <Input value={values.username}/>
                 <Button variant="primary">Validate</Button>
             </FormField>
             <FormField label="Name">
                 <Input value={values.name} onChange={(e) => {}}/>
             </FormField>
             <FormField label="Details 1">
                 <Input value={values.detail1} disabled={true}/>
             </FormField>
             <FormField label="Details 2">
                 <Input value={values.detail2} disabled={true}/>
             </FormField>
          </Form>
    </Formik>
  )

【问题讨论】：

标签： reactjs formik rtk-query

【解决方案1】：

最好使用 Formik 的 initialValues 来填充表单的输入，而不是让每个人都使用 setFieldValue。

您需要做的就是添加enableReinitialize prop。

每当您的initialValues 更新时，它将重新初始化表单。这样，您的值将被正确填充。

只需与initialValues 一起玩就可以了。

【讨论】：