时间戳

首页 > 解决方案 > 得到错误 next.js TypeError: users.map is not a function

javascript - 得到错误 next.js TypeError: users.map is not a function

问题描述

我正在尝试使用 getStaticProps 获取数据，但是每次弹出这个东西并且无法获取数据时，错误：TypeError：users.map is not a function 我卡在这段代码中请帮助我提前感谢。

import Link from 'next/link'
    import styles from '../styles/Users.module.css'
    
    export async function getStaticProps() {
                    const res = await fetch("https://reqres.in/api/users?page=2")
                    const data = await res.json()
                    
                    return {
                        props : { users: data} 
                    }
            } 
            const Users = ({users}) => {
    
                return ( 
                    <div> 
                    <h1 className={styles.use}>All Users</h1>
                    {users.map(user =>(
                    <div>
                        <Link href={'/users/' +user.id} key={user.id}>
                            <a className = {styles.single}>
                                <h3>{user.email}</h3>
                            </a>
                        </Link>
                    </div>
                    ))}
                    </div>
                );  
            }
            
        
        export default Users;

标签： javascriptreactjsreact-hooks

解决方案

检查https://reqres.in/api/users?page=2 API，它返回例如：

{
  page: 2,
  per_page: 6,
  total: 12,
  total_pages: 2,
  data: [
    //... the user data
  ]
}

因此，如果您只想访问用户，那么您应该更改

props : { users: data}

到props: { users: data.data }.

或者因为data.data有点傻，也许只是从 API 的结果中解构 data 属性：const { data }= await res.json().

推荐阅读