react-query的useQuery调用swapi.dev接口报Cannot read properties of undefined (reading 'map')错

你的代码存在两处明显问题，直接修改即可解决报错：

• 问题1：loading状态判断多了冗余空格
  代码中判断加载状态的字符串写为'loading '，末尾多了一个空格，和react-query返回的标准loading状态不匹配。加载阶段不会触发加载提示，逻辑会走到后续分支，此时data还未完成初始化是undefined，调用map方法直接报错。
• 问题2：fetchPlanets参数接收规则错误
  你使用的react-query版本中，查询函数接收的参数是包含queryKey的上下文对象，不会直接把queryKey数组的每一项展开作为入参。你当前写法里page拿到的值是undefined，最终请求的接口地址不符合预期，返回的data下不存在results字段，就算状态匹配成功也会触发报错。

修复后完整代码 #

import React  from 'react';
import { useQuery } from 'react-query';
import Planet from './Planet';

// 修改参数接收方式，从上下文对象中取queryKey
const fetchPlanets = async ({ queryKey }) => {
    const [key, page] = queryKey;
    const res = await fetch(`https://swapi.dev/api/planets/?page=${page}`);
    return res.json();
}

const Planets = () => {
    const { data, status } = useQuery(['planets', 2], fetchPlanets);

    return (
        <div>
            <h2>Planets</h2>
            {status === 'error' && (<div>Error While fetching the data !!!</div>)}
            {/* 去掉loading字符串末尾的空格 */}
            {status === 'loading' && (<div>Loading............</div>)}
            {/* 加可选链进一步兜底，避免极端情况报错 */}
            {status === 'success' && (<div>{data?.results?.map(planet => <Planet key={planet.name} planet={planet} />)}</div>)}
        </div>
    );
}

export default Planets;

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