React/Typescript中用React-query数据给useState设默认值出现undefined如何解决

• React Query 的数据请求是异步触发的，组件首次渲染时请求还未完成，返回的data值为undefined。
• useState 的初始值仅在组件首次渲染时生效一次，后续 React Query 拿到返回数据更新data后，也不会同步更新你声明的本地状态fetchData，直接对undefined调用map方法就会触发报错。
• 补充：你提供的代码中存在笔误，定义的请求函数名为fetchAlerts，但 useQuery 配置中传入的是fetchTodos，请确认函数名保持一致，避免调用失败。

方案1：直接使用 React Query 返回的 data（推荐） #

如果没有本地修改列表数据的需求，不需要额外把 React Query 的数据转存到本地 state，React Query 本身已经做了状态和缓存管理，直接使用即可，渲染时增加加载状态判断或者默认空数组兜底：

const fetchTodos = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos');
    return res.json();
};

const { data, status } = useQuery('todos', fetchTodos, {
    staleTime: 5000,
});

// 渲染逻辑
if (status === 'loading') return <div>数据加载中</div>
return (
  <>{(data || []).map(item => <div key={item.id}>{item.title}</div>)}</>
)

方案2：同步 React Query 数据到本地 state #

如果确实需要本地维护一份可修改的列表状态，可以通过 useEffect 监听data变化，有值时同步更新到本地 state，同时给 useState 设置空数组作为初始兜底值：

const fetchTodos = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos');
    return res.json();
};

const { data, status } = useQuery('todos', fetchTodos, {
    staleTime: 5000,
});
// 初始值设置为空数组，避免首次渲染遍历报错
const [fetchData, setFetchData] = React.useState<ITodo[]>([]);

// 监听data变化，请求成功后同步到本地state
React.useEffect(() => {
  if (data) {
    setFetchData(data);
  }
}, [data]);

// 渲染逻辑
{fetchData.map(item => /* 你的渲染逻辑 */)}

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