Javascript 使用自定义挂钩，我无法刷新/重新渲染组件

我正在使用一个自定义钩子来创建一个加载更多功能：

从“React”导入React
export const useLoadMore=（数据，postsPerPage=12）=>{
const[postsToShow，setPostsToShow]=React.useState（[]）
const[next，setNext]=React.useState（postsPerPage）
常量loopWithSlice=（开始、结束）=>{
const slicedPosts=data.slice（开始、结束）
setPostsToShow（[…postsToShow，…slicedPosts]）
}
React.useffect（（）=>{
loopWithSlice（0，postsPerPage）
}, [])
const handleShowMorePosts=（）=>{
loopWithSlice（下一个，下一个+后期页面）
设置下一步（下一步+后期页面）
}
返回{handleShowMorePosts，postsToShow}
}

然后我需要按价格过滤一个数组，当设置过滤器时，组件应该重新渲染，但它没有这样做：

const Comp=（{data}）=>{
常量[filterBy，setFilter]=useState（null）
const[defaultData，setData]=useState（获取（数据，'products'，[]））
常数handleFilters=（）=>{
设sorted=defaultData
如果（过滤器比==‘高’）{
sorted=defaultData.sort（{variants:[firstVariant]}，{variants:[secondVariant]}）=>{
返回parseFloat（secondVariant.price）-parseFloat（firstVariant.price）
})
}
返回排序
}
const{handleShowMorePosts，postsToShow}=useLoadMore（defaultData）
useffect（（）=>{
setData（handleFilters（））
}，[filterBy，defaultData]）
返回（{postsToShow.map（…）}）
}

该

handleFilters

函数返回我需要的

{price:“1250.00”}

这是较高价格的输出

我已经尝试了一些不同的方法，但它似乎不起作用，即使我在浏览器控制台中看到日志，组件也不会重新渲染

似乎

useLoadMore

hook没有设置新的数据数组，它只获取数组的初始值并进行设置，但在数组更改时没有设置新数组

---

有什么想法吗？

useffect

无法检测数组更改，因此一种方法是使用

array.length

作为依赖项

 React.useEffect(() => {
    loopWithSlice(0, postsPerPage, true)
    setNext(postsPerPage)

  }, [data.length])

但这是不可靠的，因为如果下一个过滤数据将有相同的长度，它将无法工作

我建议最好在

useLoadMore

中添加另一个参数，

useLoadMore=（数据，postsPerPage=12，应重置）

和重置负载更多取决于它

 React.useEffect(() => {
    loopWithSlice(0, postsPerPage, true)
    setNext(postsPerPage)

  }, [shouldReset])

并使用“按值筛选”作为其参数

 const { handleShowMorePosts, postsToShow } = useLoadMore(defaultData, 12, filterBy)

另外，JSON.stringify（data）作为依赖项也应该起作用

 React.useEffect(() => {
    loopWithSlice(0, postsPerPage, true)
    setNext(postsPerPage)

  }, [JSON.stringify(data)])

如果是初始调用，则阻止合并

  const loopWithSlice = (start, end, shouldReset) => {
    const slicedPosts = data.slice(start, end)
    if(shouldReset) {
      setPostsToShow(slicedPosts)
     } else {
      setPostsToShow([...postsToShow, ...slicedPosts])
    }

---

问题是useLoadMore钩子只会触发并设置handleShowMorePosts上的mound上的数据，当您更改默认数据时，它不会做出反应，我想您应该在过滤后从0开始分页，对吗？@BesoKakulia您是对的。使用此代码，它不会删除前12项。它在旧的第一个项目下面显示新的排序项目。因此，它显示的不是12个项目，而是24个、12个旧项目、12个已排序的新项目。每次我更改筛选器时，它都会显示12个已排序的新项目，而不会删除未排序的项目。@我忘记重置数据检查更新的答案。不知道为什么，但由于某些原因，它也不起作用：/@reactive问题出现在重置数据

setPostsToShow（[]）

在loopWithSlice中被覆盖，因为它们在同一执行中被调用。