如何用formik.setFieldValue为复选框组设置后端返回的数组值？

关键修改点 #

1. 修正复选框的关联配置
   原代码中复选框的name设为单个tag值，无法关联到Formik的tags数组字段。需要将name改为tags，同时添加checked属性，判断当前tag是否在Formik维护的tags值数组中，实现选中状态同步。

2. 用setFieldValue同步后端数据
   通过useEffect模拟后端API请求，拿到返回的数组后，调用formik.setFieldValue('tags', 后端返回数组)，将后端值同步到Formik的字段中。

修改后的完整代码 #

import React, { useEffect } from "react";
import { useFormik } from "formik";

const tags = ["one", "two", "three"];

const ProjectsForm = () => {
  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      tags: []
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

  // 模拟从后端API获取选中标签数据
  useEffect(() => {
    const fetchSelectedTags = async () => {
      // 替换为实际后端API地址
      const res = await fetch("/api/project-tags");
      const data = await res.json();
      // 用setFieldValue设置tags字段值
      formik.setFieldValue("tags", data.selectedTags);
    };

    fetchSelectedTags();
  }, [formik]);

  return (
    <form onSubmit={formik.handleSubmit}>
      {tags.map((tag) => (
        <div key={tag}>
          <input
            id={tag}
            type="checkbox"
            name="tags" // 关联Formik的tags数组字段
            checked={formik.values.tags.includes(tag)} // 同步选中状态
            onChange={formik.handleChange}
          />
          <label htmlFor={tag}>{tag}</label>
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
};

代码说明 #

• name="tags": 让所有复选框统一关联到Formik的tags数组字段，Formik会自动收集选中的标签值到数组中。
• checked属性: 通过formik.values.tags.includes(tag)判断当前标签是否被选中，确保表单状态与Formik值同步。
• enableReinitialize: true: 开启后，当initialValues或通过setFieldValue更新值时，Formik会重新初始化表单，保证后端数据能正确渲染到复选框上。

内容的提问来源于stack exchange，提问作者Ali Raza