如何将数据从状态传递到 Formik initialValues？

Question

我的表单中有一个组件将标签存储在 useState 中，但我不知道如何将该数组发送到 Formik 的 initialValues。我需要能够将该数据发送到 Formik 的 initialValues 中名为“tags”的键，如果有人可以帮助我，非常感谢。

const AddProject2 = () => {
  const [tags, setTags] = useState([]);

  return (
    <Formik
      initialValues={{
        name: "",
        tags: [],
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {() => (
        <Form>
          <div>
            <label htmlFor="name">NameProject</label>
            <Field type="text" name="name" />
          </div>

          <ReactTagInput
            placeholder="Write the tags"
            tags={tags}
            onChange={(newTags) => setTags(newTags)}
          />

          <button type="submit">Send</button>
        </Form>
      )}
    </Formik>
  );
};

export default AddProject2;

Answer 1

如果您只是将 tags 状态从 useState() 传递到 initialValues 中，如下所示，它应该可以工作。这将是 shorthand 用于放置 {name: "", tags: tags}

<Formik
      initialValues={{
        name: "",
        tags,
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >

-编辑- 关于您评论中的新问题。

这可能是 Formik 工作方式的问题。查看他们的文档，似乎使用 formic 处理输入控制的方法并不直接使用 onChange，相反，您需要使用 {...formik.getFieldProps('tags')}

传递一系列道具

所以：

{formik => (
        <Form>
          <div>
            <label htmlFor="name">NameProject</label>
            <Field type="text" name="name" />
          </div>

          <ReactTagInput
            placeholder="Write the tags"
            tags={tags}
            {...formik.getFieldProps('tags')}
          />
)}

这是否与 ReactTagInput 兼容，我不知道，但值得一试。

如何将数据从状态传递到 Formik initialValues？

How to pass the data from a state to a Formik initialValues?

reactjs

formik

use-state