如何使用 useEffect - next.js 将数据传递到 useState （用于获取和缓存的 swr 钩子）

Question

我想将数据传递到我的 useState 中，问题是，useEffect 无法很好地执行此操作......

这就是我所拥有的

const PublicationsHome = ({ data: allPubs }) => {
  // All pubs

  const { data: Publications }: thePublication = useSWR(
    `${process.env.URL}/api/publication`,
    {
      initialData: allPubs,
      revalidateOnFocus: false
    }
  );

  const [pubRequested, setPubRequested] = useState<Ipublication[]>([]);

  useEffect(() => {
      setPubRequested(Publications);
  }, []);

  console.log(pubRequested);

`;

  return ()
};

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

  return {
    props: data
  };
};

export default PublicationsHome;

所以，逻辑很简单，我通过使用 getStaticProps 获取数据，即服务器端渲染，但我想使用 SWR 钩子，所以我使用initialData，这样我就可以使用它，最后的事情是，我正在使用 useEffect，我想将出版物数据从 swr 传递到我的 useState，问题是，出版物数据太慢，无法传递数据。

正如你所看到的，我有一个 console.log() 它返回给我未定义

我能做什么，我需要在我的 useState 中使用这些数据，有什么想法吗？

感谢人们

Answer 1

您需要等待数据加载。

  useEffect(() => {
    if(data){
      setPubRequested(Publications);
    }
  }, [data]);