Next.js如何将组件导入另一组件？导入后数据不显示该如何解决

问题原因 #

Next.js 中 getServerSideProps 是页面级专属的生命周期方法，仅对 pages 目录下直接作为路由入口的页面组件生效，框架会自动在服务端调用该方法获取数据注入到页面组件的props中。你把它写在作为普通组件被导入的Hello里，框架不会触发执行，所以Hello组件接收不到posts参数，自然加载不出数据。

解决方案 #

这里提供两种常用方案，你可以根据业务需求选择：

方案1：把数据请求逻辑放到index页面层处理 #

直接将getServerSideProps移到index.js中，拿到数据后再传递给Hello组件，这是最符合Next.js设计规范的写法。
修改后的index.js代码：

import React from 'react';
import Hello from './hello'

function Index({ posts }) {
  return (
    <>
        <Hello posts={posts} />
    </>
  )
}

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users')
  const posts = await res.json()
  return {
    props: {
      posts,
    },
  }
}

export default Index;

同时把hello.js里的getServerSideProps删除即可，组件渲染逻辑不需要改动。该方案保留服务端渲染特性，对SEO友好、首屏加载速度更快。

方案2：Hello组件改用客户端请求数据 #

如果你需要让Hello组件自身封装数据请求逻辑，实现多个页面复用都能自动加载数据，就把服务端请求改成客户端请求：
修改后的hello.js代码：

import { useEffect, useState } from 'react'

function Hello() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://jsonplaceholder.typicode.com/users')
      const data = await res.json()
      setPosts(data)
    }
    fetchData()
  }, [])

  console.log(posts)
  return (
    <>
    <ul>
       {posts.map((post) =>(
          <p key={post.id}>{post.name}</p>
        ))}
    </ul>
    </>
  )
}

export default Hello

这种写法不需要改动index.js的导入逻辑，组件在客户端挂载后会自动请求数据渲染，适合不需要SEO的交互场景。

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