NextJs如何处理抓取和循环

Question

我有一个问题，我如何处理 getStaticProps 中的循环获取，因为当我这样做时，数组是空的。它是由异步代码引起的。如果我传递 ID 数组并将逻辑放入反应组件中，它就可以正常工作。我应该坚持使用组件方法还是在 getStaticProps 中进行。如果getStaticProps我怎么传数据？

export const getStaticProps: GetStaticProps = async (context) => {
  
  const assetsId = await getDataFromMongo();
const assetsArray = [] as Asset[];
      console.log(assetsId);
      assetsId.forEach((asset) => {
        const getAssets = async () => {
          const response = await fetch(
            `https://rest.coinapi.io/v1/assets/${asset}`,
            {
              method: "GET",
              headers: {
                "Content-Type": "application/json",
                "X-CoinAPI-Key": "API KEY",
              },
            }
          );
          const data = await response.json();
          assetsArray.push(data);
        };
        getAssets();
      });
      console.log(assetsArray);
  return {
    props: {
      assets: assetsId,
    },
    revalidate: 1,
  };
};

Answer 1

您需要在此处使用 Promise.all 并等待所有承诺解决。现在你的承诺解决得太晚了（响应已经发送到客户端并且数组是空的。

export const getStaticProps: GetStaticProps = async (context) => {
  const assetsId = await getDataFromMongo();

  const promises = assetsId.map(async (id) => {
    const response = await fetch(`https://rest.coinapi.io/v1/assets/${id}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "X-CoinAPI-Key": "API KEY",
      },
    });

    return response.json();
  });

  return {
    props: {
      assets: await Promise.all(promises),
    },
    revalidate: 1,
  };
};

另外请注意，您可能想要增加 revalidation，因为 1 秒与仅使用 getServerSideProps 相比几乎没有什么不同，而您会经常击中这个硬币 api！

NextJs如何处理抓取和循环

NextJs how to deal with fetching and a loop

reactjs

typescript

next.js