更新Formik表單上的初始值屬性不會更新輸入值 [英] Updating initialValues prop on Formik Form does not update input value

問題描述

我對前向裁判使用Forik形式，如下所示

Form.js

import React from "react";
import FormikWithRef from "./FormikWithRef";

const Form = ({
  formRef,
  children,
  initialValues,
  validationSchema,
  onSubmit
}) => {
  return (
    <FormikWithRef
      validateOnChange={true}
      validateOnBlur={true}
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
      ref={formRef}
    >
      {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}
    </FormikWithRef>
  );
};

export default Form;

FormikWithRef.js

import React, { forwardRef, useImperativeHandle } from "react";
import { Formik } from "formik";

function FormikWithRef(props, ref) {
  let _formikProps = {};

  useImperativeHandle(ref, () => _formikProps);

  return (
    <Formik {...props}>
      {(formikProps) => {
        _formikProps = formikProps;
        if (typeof props.children === "function") {
          return props.children(formikProps);
        }
        return props.children;
      }}
    </Formik>
  );
}

export default forwardRef(FormikWithRef);

我有一些選項卡，更新easy-peasy存儲狀態type，當我選擇第二個選項卡時，我想用Formik表單更新輸入值(最初來自value存儲狀態)，但更新特定于作為initialValues屬性傳遞給Formik組件組件的狀態。

TabForm.js

import React, { useState, useEffect, useRef } from "react";
import styled from "styled-components";
import { useStoreState } from "easy-peasy";
import Form from "./Form";
import MoneyBox from "./MoneyBox";

const Container = styled.div`
  width: 100%;
  background-color: #dfdfdf;
`;

const FieldWrapper = styled.div`
  padding: 20px 12px;
`;

const TabsForm = () => {
  const [initialValues, setInitialValues] = useState();

  const type = useStoreState((state) => state.type);
  const value = useStoreState((state) => state.value);

  const formRef = useRef(null);

  const onFormSubmit = async (values) => {
    console.log({ values });
  };

  useEffect(() => {
    if (value && type) {
      let filterVal = { ...value };
      /*  here is where I update the input value to be 3000, 
      the initial values get updated and in the `Form.js` file, 
      the console log from here also reflects this update,
      however, the input field does not update? */
      if (type === "Two") filterVal.input = 30000;
      setInitialValues(filterVal);
    }
  }, [value, type]);

  useEffect(() => {
    //   check initialValues has updated
    console.log({ initialValues });
  }, [initialValues]);

  return (
    <Container>
      {initialValues && type ? (
        <Form
          initialValues={initialValues}
          onSubmit={onFormSubmit}
          formRef={formRef}
        >
          <FieldWrapper>
            <MoneyBox name="input" currencySymbol={"￡"} />
          </FieldWrapper>
        </Form>
      ) : null}
    </Container>
  );
};

export default TabsForm;

單擊第二個選項卡時；

• TabsForms.js中的initialValues狀態更新為value.input=30000；
和中屬性也反映了<[2-8]=
• 但是，輸入沒有更新，使用MoneyBox.js組件中的useField鉤子MoneyBox.js，field對象沒有value的30000，而是之前的任何字段值，這是為什么？

我已創建CodeSandbox以查看所有使用的組件，并創建控制臺日志以查看Formik確實接收到更新的值，但似乎未應用它。

我已經在這個問題上糾結了幾天，似乎找不到解決方案，如果有任何幫助，我將不勝感激。

推薦答案

如果希望在更改initialValues時更改輸入值，則需要將道具enableReinitialize作為true傳遞給Formik組件。

因此，您需要在代碼中更改的是TabsForm.js傳遞給Form組件的屬性enableReinitialize

<Form
  enableReinitialize
  initialValues={initialValues}
  onSubmit={onFormSubmit}
  formRef={formRef}
>
  <FieldWrapper>
    <MoneyBox name="input" currencySymbol={"￡"} />
  </FieldWrapper>
</Form>

并在Form.js中將該道具傳遞給Formik組件

const Form = ({
  formRef,
  children,
  initialValues,
  validationSchema,
  onSubmit,
  enableReinitialize
}) => {
  return (
    <FormikWithRef
      enableReinitialize={enableReinitialize}
      validateOnChange={true}
      validateOnBlur={true}
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
      ref={formRef}
    >
      {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}
    </FormikWithRef>
  );
};

我不太確定您的業務邏輯應該如何工作，但以下是對上述更改的working example。

這篇關于更新Formik表單上的初始值屬性不會更新輸入值的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！