Question

我想使用 getStaticProps 为顶级产品进行静态生成。现在我的一部分渲染不需要静态生成。例如：评论、相关产品。

完整代码：

export default function Gift(props) {

  let [relatedProducts, setRelatedProducts] = useState([]);

  const getRelatedProducts = () => {
    api.get(`gift/id/${props.id}/relateds/count/10`).then(res => {
      console.log(res.data.data);
      setRelatedProducts(res.data.data)
    })
  }

  //called n times. looping !!!
  getRelatedProducts();

  return (

      <GiftProvider value={props}>
        <ProductPage/>


        <RelatedProducts title="related products" products={relatedProducts}/>

        <ProductGeneralProperties/>

        <ProductComment/>

      </GiftProvider>
   
  );
}


export async function getStaticPaths() {

  const gifts = await getTopGifts()
  const paths = gifts.map((gift) => ({
    params: {slug: gift.slug}
  }))

  return {paths, fallback: 'blocking'}
}


export async function getStaticProps(context) {
  const slug = context.params.slug
  const gift = await getGiftWithSlug(slug)
  return {
    props: gift,
  }
}

但使用以下代码我的代码呈现多次：

export default function Gift(props) {

  let [relatedProducts, setRelatedProducts] = useState([]);

  const getRelatedProducts = () => {
    api.get(`gift/id/${props.id}/relateds/count/10`).then(res => {
      console.log(res.data.data);
      setRelatedProducts(res.data.data)
    })
  }

  getRelatedProducts();

Answer 1

你可以使用useEffect钩子调用api

useEffect(() => {
  const getRelatedProducts = () => {
    api.get(`gift/id/${props.id}/relateds/count/10`).then(res => {
      console.log(res.data.data);
      setRelatedProducts(res.data.data)
    })
  }
getRelatedProducts();
},[])

如何调用客户端-服务器端渲染和静态生成渲染

1 个答案: