Блог

react-запрос Я извлекаю фиктивные данные из заполнителя json и хочу разбить их на страницы; т. е. только одно сообщение на текущей странице. если я не передаю «${страница} » в URL-адресе, то это приводит ко всем данным, но когда я передаю их, это выдает ошибку. «Пользователи.jsx:6 ПОЛУЧАЮТ https://jsonplaceholder.typicode.com/users/undefined 404″. первым параметром useQuery является массив, имеющий постоянное значение 1, он указывает нужного пользователя с идентификатором 1 и так далее..

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

    const fetchUsers=async(key,page)=>{
        const res=await fetch(`https://jsonplaceholder.typicode.com/users/${page}`); 
        return res.json();
    }

    const Users = () => {
        const [page, setPage] = useState(1)
        const {data,status}=useQuery(["users", 1], fetchUsers);
        console.log(data);
        return (
            <div>
                <h1 className="Listtype">Users List</h1>
                {status==='loading'amp;amp; <i className="fas fa-spinner fa-4x fa-spin"></i>}
                {status==='error' amp;amp; (
                    <h2 className="text-center text-danger">There is some error</h2>
                ) }
                {status==='success' amp;amp; (
                    <div>
                       <h1>{JSON.stringify(data)}</h1>
                    </div>
                )}
            </div>
        )
    }

    export default Users
  

 

Если вы используете react-query v3 , вы можете изменить свой код на

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

const fetchUsers = async (page) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${page}`)
  return res.json()
}

const Users = () => {
  const [page, setPage] = useState(1)
  const { data, status } = useQuery(['users', page], () => fetchUsers(page))
  console.log(data)
  return (
    <div>
      <h1 className="Listtype">Users List</h1>
      {status === 'loading' amp;amp; <i className="fas fa-spinner fa-4x fa-spin"></i>}
      {status === 'error' amp;amp; (
        <h2 className="text-center text-danger">There is some error</h2>
      )}
      {status === 'success' amp;amp; (
        <div>
          <h1>{JSON.stringify(data)}</h1>
        </div>
      )}
    </div>
  )
}

export default Users

 

Надеюсь, это может вам помочь!