NextJS中getServerSideProps获取数组后映射显示空白问题求解

我尝试用Twitch API获取的数据创建主播列表，通过getServerSideProps传递props后页面显示空白。用console.log能看到完整数据，但映射操作没有任何结果。

我的代码： #

export default function Home( { users } ) {

  console.log(users);
  
  return (
    <div>
      <Head>
        <title>Twitch</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

     
      <div className=''>
       {users.map((user) => (
         <div key={user.id}>
            <h1>{user.display_name}</h1>
        </div>
        ))}
      </div>
    </div>
  )
}

export async function getServerSideProps() {
  const res = await fetch('http://localhost:3000/api/users')
  const data = await res.json()
  const [users] = await Promise.all([data])
  return {
      props: {
          users
      }
  }
}

控制台输出： #

(3) [{…}, {…}, {…}]
0: {data: Array(1)}
1: {data: Array(1)}
2: {data: Array(1)}

问题出在数据结构不匹配：你打印的users数组里，每个元素都嵌套了一个data数组，主播的实际信息（比如display_name、id）在data[0]里，但你直接尝试访问user.display_name，自然找不到对应属性，导致没有内容渲染。

修复方案一：在服务端整理数据（推荐） #

修改getServerSideProps，提前把嵌套的主播数据提取出来，让组件拿到干净的数组：

export async function getServerSideProps() {
  const res = await fetch('http://localhost:3000/api/users')
  const data = await res.json()
  // 提取每个元素中data数组的第一项，组成新的用户数组
  const users = data.map(item => item.data[0])
  return {
      props: {
          users
      }
  }
}

修改后，原组件里的映射代码不需要改动，就能正常渲染主播名称。

修复方案二：在组件中访问正确的路径 #

如果不想修改服务端逻辑，直接在组件的映射里调整属性访问路径：

<div className=''>
  {users.map((userItem) => (
    <div key={userItem.data[0].id}>
       <h1>{userItem.data[0].display_name}</h1>
    </div>
  ))}
</div>

另外，原代码里的const [users] = await Promise.all([data])属于多余代码，因为data已经是res.json()返回的结果，这行可以直接删掉，不影响功能。

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