Javascript 根据不同的依赖关系获取数据的最佳useEffect设置

我需要一种性能良好的方法来根据不同的依赖关系获取数据

因此，fetchPosts需要运行：

• 装载
• 更改当前页面时
• 更改当前时间线时

和，当更改currentTimeline时，需要再次将currentPage设置为0，以便从头开始

那么现在发生了什么： fetchposts在加载时会被多次调用，这会导致对数据库的大量请求

问题:

• 我如何解决这个问题，它只在加载时调用fetchPosts，并且只有在currentpage/currentTimeline发生更改时才调用。 当currentTimeline更改时，currentpage将设置为0

/*eslint禁用react hooks/deps*/
//@flow
从“/style.module.scss”导入样式；
从“React”导入React，{useState，useffect，suspent}；
从“@material ui/core”导入{Grid，NoSsr}”；
从“@components”导入{Post as PostComponent}；
从“@types”导入类型{Post}；
从“../../api/Posts”导入{getPosts，addPosts}”；
从“@components”导入{TimelineFooter，PostCreation}；
从“@material ui/core”导入{Box}”；
从“反应无限滚动组件”导入无限滚动；
从“@material ui/core/Typography”导入排版；
从“@atoms”导入{timelineState}”；
从“反冲”导入{useRecoilValue}；
从“../../api/Posts”导入{deletePost}”；
/**
*时间线
*/
函数时间轴（）{
const[open，setOpen]=useState（false）；
const[posts，setPosts]=useState（[]）；
const[hasMore，setHasMore]=useState（true）；
const[currentPage，setCurrentPage]=useState（0）；
const currentTimeline=useRecoilValue（timelineState）；
常量fetchPosts=（）=>{
getPosts（currentTimeline.tab，currentPage）。然后（（结果：）=>{
如果（result.length>0）{
设置柱（柱状混凝土（结果））；
setHasMore（对）；
}否则{
setHasMore（假）；
}
});
};
useffect（（）=>{
控制台日志（“当前页面”）；
fetchPosts（）；
}，[currentPage]）；
useffect（（）=>{
console.log（“当前时间线”）；
设置柱（[]）；
setCurrentPage（0）；
}，[currentTimeline]）；
useffect（（）=>{
console.log（“当前页面上的帖子”）；
如果（posts.length==0）{
如果（当前页面！==0）{
setCurrentPage（0）；
}否则{
fetchPosts（）；
}
}
}，[posts，currentPage]）；
常量fetchMoreData=（）=>{
设置当前页面（当前页面+1）；
};
常量handleClickOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
const handlePostCreation=（消息：字符串，文件：数组）=>{
设formData=new formData（）；
formData.append（“内容”，消息）；
如果（文件）{
for（文件的常量文件）{
formData.append（“文件”，文件）；
}
}
追加（“timelineCategory”，currentTimeline.tab）；
formData.append（“regionName”、“General”）；
addPosts（formData）
.然后（（）=>{
设置柱（[]）；
})
.然后（手球）；
};
constOnDeletePost=uuid=>{
deletePost（uuid）。然后（（）=>{
const newposts=posts.filter（item=>item.uuid！==uuid）；
设置员额（新员额）；
});
};
返回(
{posts.map（（项目：Post）=>(
))}
);
}
导出默认时间线；

1。无限效果调用。 由于此useffect调用（或者至少是此useffect调用），您正在重复调用fetch

您正在运行一个依赖于

posts

的useffect，而在

fetchPosts

中，您正在调用

setPosts

，这会触发此useffect，导致一个无限循环

useEffect(() => {
     console.log("posts en currentpage");
     if (posts.length === 0) {
         if (currentPage !== 0) {
             setCurrentPage(0);
         } else {
             fetchPosts(); //<--- this triggers setPosts which triggers this useEffect call.
         }
     }
 }, [posts, currentPage]);

您可以将fetchPosts（）放在这里

这里呢

useEffect(() => {
    console.log("current currentTimeline");

    setPosts([]);
    setCurrentPage(0);
    fetchPosts(0);
}, [currentTimeline]);

当然，您需要更新fetchPost函数以有条件地接受参数。

1。无限效果调用。 由于此useffect调用（或者至少是此useffect调用），您正在重复调用fetch

您正在运行一个依赖于

posts

的useffect，而在

fetchPosts

中，您正在调用

setPosts

，这会触发此useffect，导致一个无限循环

useEffect(() => {
     console.log("posts en currentpage");
     if (posts.length === 0) {
         if (currentPage !== 0) {
             setCurrentPage(0);
         } else {
             fetchPosts(); //<--- this triggers setPosts which triggers this useEffect call.
         }
     }
 }, [posts, currentPage]);

您可以将fetchPosts（）放在这里

这里呢

useEffect(() => {
    console.log("current currentTimeline");

    setPosts([]);
    setCurrentPage(0);
    fetchPosts(0);
}, [currentTimeline]);

---

当然，您需要更新fetchPost函数以有条件地接受参数。

您可以从做一些小的改进开始，比如使用state update函数更新currentPage，因为它的值取决于以前的状态。 react建议采用这种方式。

这个钩子中的注释表示它是用于“当前页面上的帖子”的。 然而，“帖子”看起来是一个总帖子的数组，而不是每页的帖子

 useEffect(() => {
    console.log("posts en currentpage");
    if (posts.length === 0) {
        if (currentPage !== 0) {
           setCurrentPage(0);
        } else {
           fetchPosts();
        }
     }
  }, [posts, currentPage]);

上面的钩子也将在挂载时执行，因为最初的POST将为空，currentPage将为0。 因此，在加载本身时，“fetchPosts”将被调用两次。

---

如果您打算跟踪每页的所有帖子，那么您可能需要重新考虑此处的逻辑。

您可以从做一些小的改进开始，例如使用状态更新功能更新currentPage，因为其值取决于以前的状态。 react建议采用这种方式。

此钩子中的注释指示

const fetchMoreData = () => {
  setCurrentPage(prevCurrentPage => prevCurrentPage + 1);
};

 useEffect(() => {
    console.log("posts en currentpage");
    if (posts.length === 0) {
        if (currentPage !== 0) {
           setCurrentPage(0);
        } else {
           fetchPosts();
        }
     }
  }, [posts, currentPage]);