使用react-query分页请求JSONPlaceholder数据出现404错误如何解决？

• 查询函数入参格式不符合React Query的规范：React Query 调用查询函数时，只会传入一个上下文对象作为唯一参数，该对象包含queryKey（你传入的查询键数组）、signal等属性。你定义的fetchUsers声明了两个入参，第二个page永远不会被传值，最终为undefined，导致请求地址拼接为/users/undefined触发404。
• 查询键未关联分页状态：你已经声明了page状态用于分页，但useQuery的查询键中写死了常量1，没有绑定page变量，后续调整页码也无法触发新的请求，无法实现分页功能。

首先调整查询函数的参数逻辑，从上下文对象中提取查询键里的页码；再将查询键中的常量替换为page状态变量，完整修复后的代码如下：

import React,{useState} from 'react';
import {useQuery} from 'react-query';
import User from './User';

// 调整参数获取逻辑，从上下文的queryKey中取页码
const fetchUsers=async({queryKey})=>{
    const [_key, page] = queryKey;
    const res=await fetch(`https://jsonplaceholder.typicode.com/users/${page}`); 
    return res.json();
}

const Users = () => {
    const [page, setPage] = useState(1)
    // 查询键绑定page状态变量
    const {data,status}=useQuery(["users", page], fetchUsers);
    console.log(data);
    return (
        <div>
            <h1 className="Listtype">Users List</h1>
            {status==='loading'&& <i className="fas fa-spinner fa-4x fa-spin"></i>}
            {status==='error' && (
                <h2 className="text-center text-danger">There is some error</h2>
            ) }
            {status==='success' && (
                <div>
                   <h1>{JSON.stringify(data)}</h1>
                   {/* 可直接使用下方页码切换按钮实现分页交互 */}
                   <button onClick={()=>setPage(prev=>Math.max(prev-1,1))} disabled={page===1}>上一页</button>
                   <button onClick={()=>setPage(prev=>Math.min(prev+1,10))} disabled={page===10}>下一页</button>
                </div>
            )}
        </div>
    )
}

export default Users

注：JSONPlaceholder的用户接口总共有10条数据，所以下一页按钮限制了最大页码为10，你可以根据实际业务需求调整。

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