Javascript 如何编写一个钩子从获取json中加载更多按钮？

我使用fetch调用我的伪api并获取Json数据。 如何连接“加载更多”按钮以加载更多数据

一切正常，我只需要添加加载按钮的功能。 我有一个empyt函数

见下面的代码：

import React from "react";
import { useState, useEffect } from 'react';
import Grid from "./components/elements/Grid";
import PetImage from "./components/elements/PetImage";
import LoadMore from "./components/elements/LoadMore";

const Main = () => {

    //state for img grid
    const [pets, setPets] = useState([]);
  
    //load more pets
    //need to write a condtion allow more pets
    const loadMorePets = () => {
      ?code?
    };

    //fake api call
    useEffect(()=>{
        fetch('./petfinder.json')
          .then((res)=>res.json())
          .then((data)=>{
            // console.log(data); //test
            setPets(data.slice(0, 9))
          });
      },[])

  return (
    <div>
      <Grid text="Find your pet!" >
          {pets.map( (pet, id) => (
          <PetImage
            key={id} 
            pet={pet}
            petId={pet.id}
            clickable
          />))}
      </Grid>
      <LoadMore text="Load More" onClick={loadMorePets} />
    </div>
  );
};

export default Main;
```THANKS!

从“React”导入React；
从“react”导入{useState，useEffect}；
从“/components/elements/Grid”导入网格；
从“/components/elements/PetImage”导入PetImage；
从“/components/elements/LoadMore”导入LoadMore；
常量Main=（）=>{
//img网格状态
const[pets，setPets]=useState（[]）；
//装载更多宠物
//需要写一个条件允许更多的宠物
const loadMorePets=（）=>{
？代码？
};
//假api调用
useffect（（）=>{
获取（'./petfinder.json'）
.然后（（res）=>res.json（））
。然后（（数据）=>{
//console.log（数据）；//测试
setPets（数据片（0,9））
});
},[])
返回(
{pets.map（（pet，id）=>(
))}
);
};
导出默认主；
```谢谢！

那么您已经拥有了所有数据，但您需要将其分块显示？这个怎么样

import React from "react";
import { useState, useEffect } from 'react';
import Grid from "./components/elements/Grid";
import PetImage from "./components/elements/PetImage";
import LoadMore from "./components/elements/LoadMore";

const Main = () => {

    //state for img grid
    const [allPets, setAllPets] = useState([]);
    const [petCount, setPetCount] = useState(9);
  
    //load more pets
    //need to write a condtion allow more pets
    const loadMorePets = () => {
      setPetCount(allPets.length)
    };

    //fake api call
    useEffect(()=>{
        fetch('./petfinder.json')
          .then((res)=>res.json())
          .then((data)=>{
            // console.log(data); //test
            setAllPets(data)
          });
      },[])

  return (
    <div>
      <Grid text="Find your pet!" >
          {allPets.slice(0, petCount).map( (pet, id) => (
          <PetImage
            key={id} 
            pet={pet}
            petId={pet.id}
            clickable
          />))}
      </Grid>
      <LoadMore text="Load More" onClick={loadMorePets} />
    </div>
  );
};

export default Main;

从“React”导入React；
从“react”导入{useState，useEffect}；
从“/components/elements/Grid”导入网格；
从“/components/elements/PetImage”导入PetImage；
从“/components/elements/LoadMore”导入LoadMore；
常量Main=（）=>{
//img网格状态
const[allPets，setAllPets]=useState（[]）；
const[petCount，setPetCount]=useState（9）；
//装载更多宠物
//需要写一个条件允许更多的宠物
const loadMorePets=（）=>{
setPetCount（allPets.length）
};
//假api调用
useffect（（）=>{
获取（'./petfinder.json'）
.然后（（res）=>res.json（））
。然后（（数据）=>{
//console.log（数据）；//测试
设置所有宠物（数据）
});
},[])
返回(
{allPets.slice（0，petCount）.map（（pet，id）=>(
))}
);
};
导出默认主；

创建另一个钩子来存储api中的全部数据，并在useEffect中将完整数据存储在该钩子中

const[data，setData]=useState（[]）；
useffect（（）=>{
获取（'./petfinder.json'）
.然后（（res）=>res.json（））
。然后（（数据）=>{
//console.log（数据）；//测试
setPets（数据片（0,9））
setData（数据）
});
},[])

这样，您可以再次重做切片，而无需再次调用API

const loadMorePets=（）=>{
setPets（数据片（0,18））
};

---

您还可以在钩子中跟踪最小/最大切片值，并在加载过程中根据需要对其进行编辑更多

将提取放入函数中，并让onclick和useffect调用它？谢谢您的回答。我累了，但我陷入了一个循环中…嗨，谢谢你的关注，我尝试了上面的解决方案，但我得到了一个infinte循环错误。你确定你复制的正确吗？下面是一个代码处理工具：它在codesandbox中工作，但在我的应用程序中不工作。我收到一条错误消息，说明重新渲染太多，卡在循环中。。。。不确定是什么问题，但感谢您的帮助。您能分享您的确切代码吗？@cyberAnn如果您正在使用onClick={loadMorePets（）}调用load more on render，请在第86行中删除（）。