Question

由于他们需要在 AFTER 构建后获取的数据，我该如何延迟执行上述功能，直到收到数据？

export async function getStaticPaths() {
  // get the paths we want to pre render based on products
 
  const paths = products.map((product) => ({
    params: { slug: 
      product.slug }
  }));
console.log(paths,"Paths in getStaticPaths()")
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // get product data based on slug

  const product = products.filter((single) => single.slug === params.slug)[0];
  console.log(product,"In getStaticProps()")
  return { props: { product } };
}

在上面，products包含所有导入的原始数据。

我需要用返回数据的函数来替换此数据导入，但是由于调用尚未结束，我最终以null结束。

Answer 1

您可以使用两个useEffect钩子，在第一个钩子中初始化数据，并准备好将其设置为状态data时，在第二个useEffect中，您可以执行以下操作：

useEffect(()=>
 if(data){
   // setLoader(false)
}else{
 // setLoader(true)
},[data])

并在返回中执行条件渲染：

if (loading){
 return(<ActivityIndicator/>)
}else{
 return // your component
}

预渲染的页面（如getStaticPaths（）和getStaticProps（）中的页面）如何利用在执行期间从数据库中获取的数据？

1 个答案: