无法读取未定义的属性（读取 'map'）- useQuery

Question

我正在使用 https://swapi.dev/ 表单 Api 的调用，但它抛出“无法读取未定义的属性（读取 'map'）”错误。

请检查以下错误和代码

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

const fetchPlanets = async (key, page) => {
    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>)}
            {status === 'loading ' && (<div>Loading............</div>)}
            {status === 'success' && (<div>{data.results.map(planet => <Planet key={planet.name} planet={planet} />)}</div>)}
        </div>
    );
}

export default Planets;

谢谢提前:)

Answer 1

如您的屏幕截图所示，api 提供了 404 - Not found 响应。因为您使用的是 fetch，错误的状态代码不会自动转换为失败的承诺，因此您必须通过检查 res.ok 来手动执行此操作。这记录在 Usage with fetch and other clients that do not throw by default.

下的 react-query 文档中

因此，您使用 undefined 作为 data 有效地获得了成功的查询，这就是您出现运行时错误的原因。

要找出您请求 ?page=undefined 的原因，我们必须看看您如何调用 fetchPlanets:

useQuery(['planets', 2], fetchPlanets);

您将 fetchPlanets 作为 queryFn 传递，但签名与 react-query 期望的不匹配：

const fetchPlanets = async (key, page) => {

从 v3 开始，查询键不再作为函数中的参数“传播”。这记录在 v3 migration guide 中。相反，查询函数现在接收一个 queryContext - 一个包含键的对象。因此，您可以将签名更改为：

const fetchPlanets = async ({ queryKey }) => {

然后使用 queryKey[1] 访问 page，或者，您使用内联函数：

const fetchPlanets = async (page) => {
...
}

useQuery(['planets', page], () => fetchPlanets(page))

Answer 2

对我来说工作得很好 :) 更新版本的反应查询来了所以我们需要做一些小的改变

const fetchPlanets = async (page) => {
    const res = await fetch(`https://swapi.dev/api/planets/?page=${page}`);
    return res.json();
};

如果要设置数据：

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

无法读取未定义的属性（读取 'map'）- useQuery

Cannot read properties of undefined (reading 'map') - useQuery

reactjs

react-hooks

react-query