Next.js中如何通过useEffect将SWR缓存的请求数据存入useState

修复方案 #

1. 先修正getStaticProps的返回值结构，确保服务端预取的数据能正确传入组件作为SWR的初始值：

export const getStaticProps: GetStaticProps = async () => {
  const { data } = await axios.get(`${process.env.URL}/api/publication`);

  return {
    // 原写法直接返回data会导致组件解构不到data字段，需要包裹为对象
    props: {
      data
    }
  };
};

2. 给useEffect添加Publications作为依赖项，确保SWR数据更新时会同步到本地state：

useEffect(() => {
  // 可选添加判空逻辑，避免无意义的状态更新
  if (Publications) {
    setPubRequested(Publications);
  }
// 把Publications加入依赖数组，数据变化时自动触发副作用
}, [Publications]);

3. 可选优化：如果你不需要在本地修改这份数据、只做展示用，完全可以直接使用SWR返回的Publications变量，不需要额外存入useState，减少冗余状态。

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