Next.js中getServerSideProps传参后页面组件无法显示数据

我通过getServerSideProps从服务器获取数据：

export async function getServerSideProps(context) {
  const packageIdentifier = context.params.packageIdentifier;
  const data = await getReviewsData(packageIdentifier);

  return {
    props: {
      response: {
        packageIdentifier,
        data,
      }
    }
  };
}

随后尝试将数据加载到页面组件中，控制台能正常打印数据，但页面渲染时却无法显示：

export default function ReviewsPage({ response }) {
  // DATA IS PRINTED TO CONSOLE AND WORKING FINE
  console.log(`Reviews Data: ${JSON.stringify(response.data)}`);
  
  const { data, setData } = useState(response.data);

  useEffect(() => {
    setData(response.data);
  }, [data]);

  return (
    <Fragment>
      <Box>
        { data && <Reviews reviews={data} /> }
        { !data && <div>There are no reviews to display.</div> }
      </Box>
    </Fragment>
  );
}

页面渲染时显示'There are no reviews to display'，这意味着data为空。请问我哪里操作错误？

问题分析与解决方案 #

错误原因 #

1. 冗余状态管理导致数据异常
   你完全不需要用useState和useEffect存储response.data——response是getServerSideProps传递的props，初始渲染时就已有值，直接使用props数据即可。

你写的useEffect存在逻辑错误：把data作为依赖项，同时在effect里调用setData(response.data)，会引发两个问题：

• 如果response.data是数组/对象这类引用类型，初始useState赋值的是引用，setData传入相同引用不会触发组件更新；
• 若后续data发生变化，会触发effect重复执行，陷入不必要的循环，甚至可能导致data被错误重置。

2. 数据判断逻辑不够精准
   如果response.data是空数组[]或空对象{}，data && <Reviews ...>的判断会将其视为真值，但当前页面显示“无数据”，核心问题还是状态管理逻辑错误导致data被置为假值。

修正后的代码 #

直接使用props中的数据，去掉冗余的状态和effect，同时优化数据判断逻辑：

export default function ReviewsPage({ response }) {
  console.log(`Reviews Data: ${JSON.stringify(response.data)}`);
  const reviewsData = response.data;

  // 根据数据类型选择判断方式：数组用length，对象用键名数量
  const hasReviews = Array.isArray(reviewsData) 
    ? reviewsData.length > 0 
    : Object.keys(reviewsData || {}).length > 0;

  return (
    <Fragment>
      <Box>
        { hasReviews && <Reviews reviews={reviewsData} /> }
        { !hasReviews && <div>没有评论可以显示。</div> }
      </Box>
    </Fragment>
  );
}

额外提示 #

• 如果不需要在组件内部修改评论数据（比如筛选、排序），不要把SSR/SSG传递的props存到组件状态里，直接使用props即可；
• 针对空数据的判断要精准，避免把空数组/空对象当成“有数据”的情况，导致组件渲染异常。

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