如何将API响应数据批量写入Formik表单？

如果你拿到的API响应数据结构和Formik的initialValues完全一致，根本不用循环调用setFieldValue，直接用Formik提供的setValues方法就能一次性把整个数据写入表单。

修改步骤： #

• 从form实例中解构出setValues方法（替代原来的循环赋值逻辑）
• 在useEffect里，当projectData不为空时，直接调用setValues(projectData)完成一次性赋值

修改后的代码示例：

const form = useFormik({
  initialValues: {
    name: "",
    login: "",
    about: {
      age: "",
      rank: {
        silver: true,
        gold: false,
        global: false
      }
    }
  }
});

// 解构出需要的方法，新增setValues
const {
  values,
  handleChange,
  setFieldValue,
  setValues
} = form;

useEffect(() => {
  if (!isEmpty(projectData)) {
    // 直接传入完整数据完成赋值
    setValues(projectData);
  }
}, [projectData, setValues]); // 依赖项中加入setValues

补充说明： #

• setValues会直接替换整个表单的values对象，只要你的projectData结构和initialValues完全匹配，嵌套字段（比如about.age、about.rank这类深层属性）也能被正确赋值。
• 你原来的循环逻辑存在错误：Object.keys(projectData)拿到的是对象的键名（比如'name'、'login'），后续Object.keys(item).at(-1)的写法完全不成立——因为item是字符串类型的键名，不是对象，这会导致代码报错或赋值失败，用setValues可以彻底规避这类问题。

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