如何将useState存储的数据传递给Formik的initialValues？

方案1：移除冗余的useState（更推荐） #

Formik本身自带表单状态管理能力，不需要额外用useState存储标签数据，直接绑定Formik内部的tags字段即可：

import { Formik, Form, Field } from 'formik';
import ReactTagInput from '@path/to/react-tag-input'; // 替换为你实际的组件引入路径

const AddProject2 = () => {
  return (
    <Formik
      initialValues={{
        name: "",
        tags: [],
      }}
      onSubmit={(values) => {
        console.log(values); // 提交时可直接拿到正确的tags数组
      }}
    >
      {({ values, setFieldValue }) => ( // 解构Formik提供的状态读写方法
        <Form>
          <div>
            <label htmlFor="name">NameProject</label>
            <Field type="text" name="name" />
          </div>

          <ReactTagInput
            placeholder="Write the tags"
            tags={values.tags} // 直接绑定Formik内部的tags状态
            onChange={(newTags) => setFieldValue('tags', newTags)} // 修改时直接更新Formik的tags字段
          />

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

export default AddProject2;

方案2：保留外部useState（特殊业务场景使用） #

如果确实需要在组件层级单独存储tags状态，只需要在标签变更时同步更新到Formik内部状态即可：

import { useState } from 'react';
import { Formik, Form, Field } from 'formik';
import ReactTagInput from '@path/to/react-tag-input';

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

  return (
    <Formik
      initialValues={{
        name: "",
        tags: tags, // 初始值直接复用useState的初始值
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ setFieldValue }) => (
        <Form>
          <div>
            <label htmlFor="name">NameProject</label>
            <Field type="text" name="name" />
          </div>

          <ReactTagInput
            placeholder="Write the tags"
            tags={tags}
            onChange={(newTags) => {
              setTags(newTags);
              setFieldValue('tags', newTags); // 同步更新到Formik状态
            }}
          />

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

export default AddProject2;

内容的提问来源于stack exchange，提问作者Alex Garzón