React Query与Formik异步初始化值问题解决方案咨询

你的代码如下：

const {productid} = useParams()

const  {isLoading,isErr,data,err} =useQuery([`Admin`,productid],() =>  fetchProduct(productid))
   
const formik = useFormik({
    initialValues: {title:data?.title,
      description:`${data?.description}`,
      price:`${data?.price}`,
      photos:data?.photos},
      onSubmit:()=>{}
    }
   )

问题核心是React Query异步加载数据时，Formik初始化阶段data还没返回，导致初始值全是null。不能用then链式调用的方式，得符合React Hooks的规则，给你两种可行的解决思路：

思路一：等数据加载完成再初始化Formik #

利用React Query返回的isLoading状态做条件渲染，等数据加载完成后再创建Formik实例并渲染表单：

const { productid } = useParams()

const { isLoading, isErr, data, err } = useQuery(['Admin', productid], () => fetchProduct(productid))

// 加载中时展示加载状态
if (isLoading) return <div>加载中...</div>
// 加载出错时展示错误信息
if (isErr) return <div>加载失败：{err.message}</div>

// 数据加载完成后再初始化Formik
const formik = useFormik({
  initialValues: {
    title: data.title,
    description: data.description,
    price: `${data.price}`,
    photos: data.photos
  },
  onSubmit: () => {}
})

return (
  <form onSubmit={formik.handleSubmit}>
    {/* 这里写你的表单控件，比如： */}
    <input
      name="title"
      value={formik.values.title}
      onChange={formik.handleChange}
    />
    {/* 其他表单字段 */}
  </form>
)

这种方式简单直接，确保Formik初始化时data已经存在，不会出现null的情况。

思路二：开启Formik的重新初始化功能 #

如果需要提前渲染表单结构（比如不想让用户一直看加载状态），可以给Formik设置enableReinitialize: true，允许初始值更新，然后在数据加载完成后手动填充表单值：

const { productid } = useParams()

const { isLoading, isErr, data, err } = useQuery(['Admin', productid], () => fetchProduct(productid))

const formik = useFormik({
  // 先设置合理的空初始值
  initialValues: {
    title: '',
    description: '',
    price: '',
    photos: []
  },
  enableReinitialize: true, // 开启重新初始化
  onSubmit: () => {}
})

// 监听data变化，数据加载完成后更新表单值
useEffect(() => {
  if (data) {
    formik.setValues({
      title: data.title,
      description: data.description,
      price: `${data.price}`,
      photos: data.photos
    })
  }
}, [data, formik])

if (isLoading) return <div>加载中...</div>
if (isErr) return <div>加载失败：{err.message}</div>

return (
  <form onSubmit={formik.handleSubmit}>
    {/* 表单控件 */}
  </form>
)

这种方式可以先渲染空表单，等数据返回后自动填充，用户体验更流畅。

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