为什么没有使用 NextJS 从表单提交动态值？

Question

我正在基于 NextJS 代码开发 React。

如果我在表单字段中手动输入值并提交表单，我将获得组件函数中的所有值。

但是，如果我在表单字段（例如 value={query.campaignid}）中动态显示值，则该组件不会收集任何值。

import { Button, Input } from "@chakra-ui/react";
import { Field, Form, Formik } from "formik";

import { useRouter } from "next/router";

export default function FormikExample() {
  const { query } = useRouter();

  return (
    <>
      <Formik
        initialValues={
          {
            // campaignid: " ",
          }
        }
        onSubmit={(values) => {
          setTimeout(() => {
            console.log(values);
          });
        }}
      >
        {(props) => (
          <Form>
            <Field name="campaignid">
              <Input value={query.campaignid} />
            </Field>

            <Button id="submited" isLoading={props.isSubmitting} type="submit">
              Submit
            </Button>
          </Form>
        )}
      </Formik>
    </>
  );
}

Answer 1

解决了！

我将 URL 查询传递给 initialValues 并在下面添加了 enableReinitialize={true}：

...
     initialValues={{
        campaignId: query.campaignid,         
     }}
     enableReinitialize={true}
...

在输入值中我传递了这些属性：

 <Field name="campaignid">
       <Input value={props.values.campaignId} />
  </Field>