Chakra UI是否有setFieldsValue函数？有无替代Formik的表单初始化方案？

Chakra UI本身没有像AntD Form那样内置的setFieldsValue函数——它作为UI组件库，表单状态管理主要依赖第三方工具（比如Formik、React Hook Form）。除了Formik的initialValues，还有更灵活的实现方式：

方案1：React Hook Form + setValue #

React Hook Form的setValue方法和AntD的setFieldsValue逻辑高度一致，且基于非受控组件设计，性能更优。步骤如下：

• 用useForm初始化表单，无需提前定义initialValues
• API请求完成后，通过setValue逐个或批量设置字段值
• Chakra输入组件通过register方法与React Hook Form绑定

示例代码：

import { useForm } from 'react-hook-form';
import { Input, Box } from '@chakra-ui/react';
import { useEffect } from 'react';

function UserForm() {
  const { register, setValue } = useForm();

  useEffect(() => {
    // 模拟API拉取用户数据
    const fetchUser = async () => {
      const res = await fetch('/api/user/profile');
      const userData = await res.json();
      
      // 批量设置字段，和setFieldsValue用法一致
      setValue({
        username: userData.username,
        email: userData.email,
        phone: userData.phone
      });
      // 也可以单独设置单个字段：setValue('username', userData.username)
    };
    
    fetchUser();
  }, [setValue]);

  return (
    <Box spacing={3} display="flex" flexDir="column">
      <Input {...register('username')} placeholder="用户名" />
      <Input {...register('email')} placeholder="邮箱" />
      <Input {...register('phone')} placeholder="手机号" />
    </Box>
  );
}

方案2：Formik的setFieldValue/setValues #

如果你已经在使用Formik，无需局限于initialValues——它本身提供了和setFieldsValue等价的实例方法，适合组件渲染后异步获取数据的场景：

• 通过useRef获取Formik实例
• API请求完成后，调用setFieldValue（单个字段）或setValues（批量）更新表单值

示例代码：

import { Formik, Form, Field } from 'formik';
import { Input, Box } from '@chakra-ui/react';
import { useEffect, useRef } from 'react';

function UserForm() {
  const formikRef = useRef(null);

  useEffect(() => {
    const fetchUser = async () => {
      const res = await fetch('/api/user/profile');
      const userData = await res.json();
      
      if (formikRef.current) {
        // 单个字段更新
        formikRef.current.setFieldValue('username', userData.username);
        // 批量更新
        // formikRef.current.setValues({
        //   username: userData.username,
        //   email: userData.email
        // });
      }
    };
    
    fetchUser();
  }, []);

  return (
    <Box>
      <Formik
        initialValues={{ username: '', email: '' }}
        onSubmit={(vals) => console.log(vals)}
        innerRef={formikRef}
      >
        {() => (
          <Form>
            <Field name="username" as={Input} placeholder="用户名" />
            <Field name="email" as={Input} placeholder="邮箱" mt={2} />
          </Form>
        )}
      </Formik>
    </Box>
  );
}

总结 #

• Chakra UI本身无内置状态管理方法，但结合React Hook Form的setValue或Formik的实例方法，完全可以实现和setFieldsValue一致的效果
• React Hook Form更轻量，适合追求性能的场景；如果已接入Formik，直接用它的更新方法更顺手

内容的提问来源于stack exchange，提问作者Jung Brown White