如何在React Query中获取接口返回的data.data并替代useEffect逻辑？

方案一：直接在查询函数中处理返回值（推荐） #

React Query 的查询函数可以直接返回你需要的最终数据，这样 useQuery 返回的 data 就是接口返回的 data.data，无需额外维护本地状态：

// React Query 实现逻辑
const { data: education, isLoading, refetch } = useQuery(
  ['education', user?.email], // 查询键，用业务相关名称更清晰
  () => 
    fetch(`http://localhost:5000/education/${user?.email}`)
      .then(res => res.json())
      .then(apiResponse => apiResponse.data) // 在这里提取 data.data 并返回
)

if (isLoading) {
  return <Loading />
}

// 后续直接使用 education 变量即可，无需调用 setEducation
// 示例渲染：
return (
  <div>
    {education?.map(item => (
      <div key={item.id}>{item.schoolName}</div>
    ))}
  </div>
)

方案二：同步到本地状态（如需兼容原有状态逻辑） #

如果因为业务需求必须将数据存入自己维护的 useState，可以通过 useEffect 监听 React Query 返回的原始数据，再更新本地状态：

import { useState, useEffect } from 'react'
import { useQuery } from '@tanstack/react-query'

// 原有本地状态
const [education, setEducation] = useState(null)

const { data: apiResponse, isLoading, refetch } = useQuery(
  ['education', user?.email],
  () => 
    fetch(`http://localhost:5000/education/${user?.email}`)
      .then(res => res.json())
)

// 监听接口返回数据，更新本地状态
useEffect(() => {
  if (apiResponse) {
    setEducation(apiResponse.data)
  }
}, [apiResponse])

if (isLoading) {
  return <Loading />
}

说明：方案一利用了 React Query 的数据管理能力，减少了手动维护状态的代码，是更符合 React Query 设计理念的用法。

内容的提问来源于stack exchange，提问作者mahmudul islam asif