Question

I m使用平线和下方。 j i m 能够自动取用的数据,但当数据变化时,数据没有更新。它首先在建构时使用数据,即改变平线数据,而不是在以后更新数据。 j 能够在平方地方看到数据变化,而不是在下。页: 1 下面是我。 js 代码:

页: 1

    import Blogs from  ./components/Blogs ;
    import Categories from  ./components/Categories ;
    import Image from  next/image 
    
    
    async function fetchBlogs(){
      const options = {
        headers : {
    
          Authorization: `Berer ${process.env.STRAPI_API_TOKEN}`
        }
      }
    
    
    try {
     
      const res = await fetch ("http://127.0.0.1:1337/api/blogs?populate=*", options);
      const response = await res.json();
      return response;
    
    } catch (err) {
    
      console.error(err);
    
    }
    }
    
    async function fetchCategories(){
      const options = {
        headers : {
    
          Authorization: `Berer ${process.env.STRAPI_API_TOKEN}`
        }
      }
    
    
    try {
     
      const res = await fetch ("http://127.0.0.1:1337/api/categories", options);
      const response = await res.json();
      return response;
    
    } catch (err) {
    
      console.error(err);
    
    }
    }
    
    export default async function Home() {
      const categories = await fetchCategories();
      const blogs = await fetchBlogs();
    
      return (
       <div> 
        
        <Categories categories={categories} />
        <Blogs blogs={blogs} />
        </div>
    
      );
    
      

}

类别:

"use client";
import Rect from  react 


const Category = ({cat}: any) => {
    return (

        <div 
        onClick ={() => {}} 
        className = "bg-[#af8533] p-4 rounded-lg shadow-md cursor-pointer"
        >

          {cat.attributes.Title}

        </div> 

    );
};

export default Category

类别。

import React from  react 
import Category from  ./Category 



    const Categories = ({categories}: any) => {

      return (
        <div className= flex gap-6 mb-8 >
          {categories?.data?.map((category: any) => (
            <div key={category.id}>
              <Category cat={category} />
            </div>
          ))}
        </div>
      );
};

export default Categories;

Answer 1

否则,将使用<代码>fetch,在接下来的js中,还将填满海滩,这些藏匿点将重新用于随后优化网络使用的要求。即便对背书的数据作改动,接下来的js也会因违约而首先使用海滩,也就是说,它将显示以前的数据。

可以通过人工更新数据的方法,或者根据活动(如复读纽顿)或时间更新。我请大家阅读:docs here。

时间框架:

fetch( https://... , { next: { revalidate: 3600 } })

手册触发例子:

export default async function Page() {
  const res = await fetch( https://... , { next: { tags: [ collection ] } })
  const data = await res.json()
  // ...
}


// In another file
 use server 
 
import { revalidateTag } from  next/cache 
 
export default async function action() {
  revalidateTag( collection )
}

或者,如果有必要,你可以完全选择不适用割裂。

脚注:您错写了<代码>Bearer写作<代码>Ber。

友情链接