Github API 不显示用户

Question

无法显示 Github 用户名和个人资料照片的列表。我正在使用 https://api.github.com/users 从 API 中获取数据。我还没有开始处理个人资料链接。 Here's what's being displayed

这是我的 App.js:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';

function App() {
  return (
    <Router>
      <div className='flex flex-col justify-between h-screen'>
          <Navbar />
          <main className='container mx-auto px-3 pb-12'>
            <Routes>
              <Route path='/' element={< Home />} />
              <Route path='/about' element={< About />} />
              <Route path='/notfound' element={< NotFound />} />
              <Route path='/*' element={< NotFound />} />
            </Routes>
          </main>

          <Footer />
        </div>
    </Router>
  );
}

export default App;

这里是UserResults.jsx：

import {useEffect, useState} from 'react'
import Spinner from '../layout/Spinner'
import UserItem from './UserItem'

function UserResults() {
    const [users, setUsers] = useState([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        fetchUsers()
    }, [users])

const fetchUsers = async () => {
    const response = await fetch(`https://api.github.com/users`)
    const data = await response.json()
   
    setUsers(data)
    setLoading(false)
}
  if (!loading) {
  return (
    <div className='grid grid-cols-1 gap-8 xl:grid-cols-4
        lg:grid-cols-3 md:grid-cols-2'>
        {users.map((user) => (
            <UserItem key={user.id} user={user} />
        ))}
    </div>
  )
  } else {
      return <h3><Spinner /></h3>
  }
}

export default UserResults

UserItem.jsx 显示用户信息：

import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

function UserItem({users: login, avatar_url}) {
  return (
    <div className='card shdow-md compact bg-base-100 '>
      <div className='flex-row items-center space-x-4 card-body'>
        <div>
          <div className='avatar'>
            <div className='rounded-full shadow w-14 h-14'>
              <img src={avatar_url} alt='profile pic'></img>
            </div>
          </div>
        </div>
        <div>
          <h2 className='card-title'>{login}</h2>
          <Link className='text-base-content text-opacity-40' to={`/users/${login}`}>
            Visit Profile
          </Link>
        </div>
      </div>
    </div>
  )
}

UserItem.propTypes = {
  users: PropTypes.object.isRequired,
}

export default UserItem

感觉我在引用 API 的方式中遗漏了一些东西。提前致谢！

Answer 1

UserItem函数中的对象解构好像写错了：

function UserItem({users: { login, avatar_url }}) {

Answer 2

UserItem 组件被调用为：

<UserItem key={user.id} user={user} />

你应该定义如下：

function UserItem({key, user}) {
    // here you can use user.avatar_url and any other user related key

Github API 不显示用户

Github API Not displaying users

github-api

reactjs