Javascript 更新Formik表单上的initialValues属性不会更新输入值

我使用了一个formik表单，前面有这样的引用

Form.js 单击第二个选项卡时

• TabsForms.js

  中的

  initialValues

  状态将更新，以便

  value.input

  =

  30000

• Form.js

  和

  FormikWithRef.js

  中的

  initialValues

  属性也反映了

  value.input

  =

  3000

• 但是，在

  MoneyBox.js

  组件中使用

  forimk

  中的

  useField

  钩子，

  field

  对象没有

  值
  30000
  ，而是字段值之前的值，这是为什么

我创建了一个控制台来查看所有使用的组件，并创建了控制台日志来查看Formik是否接收到更新的值，但似乎没有应用它

---

我在这个问题上纠缠了几天，似乎找不到解决方案，非常感谢您的帮助。

如果您希望在更改

初始值时更改输入值，则需要将道具作为
true
传递到
Formik
组件

因此，您需要在代码中更改的是
TabsForm.js
传递到
表单
组件中的prop
启用重新初始化

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

我不太确定您的业务逻辑应该如何工作，但下面是一个关于上述更改的示例。
（）

它被称为
initialValues
，那么为什么您希望它在更改表单值时更新表单值呢？（不过，您可以使用
enableReinitialize
prop要求它这样做，正如@Vencovsky在另一个答案中提到的那样。）

要将所需值（
easy peasy
store中的
value.input
）绑定到formik input，您可以使用：

const [field, meta, helpers] = useField(props);
useEffect(() => {
  helpers.setValue(value.input)
}, [value])

每次存储中的
值发生变化时，它都会更新formik输入字段的值

要更改存储中状态的值，可以使用设置选项卡的方法。（使用
easy peasy
store。）


在
Tabs.js
中的第49行，它在单击选项卡时更新值

在
Input.js
的第19行，它将输入值绑定到您的存储状态。
enableReinitialize={true}prop将为您提供帮助。
谢谢。不知道道具的存在！请慢慢来提供高质量的答案。你能解释一下它的工作原理，并添加一个小例子吗？请看？
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;


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

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>
  );
};

const [field, meta, helpers] = useField(props);
useEffect(() => {
  helpers.setValue(value.input)
}, [value])