在看这个之前,可以先去了解useEffect的原理和执行机制https://zh-hans.reactjs.org/docs/hooks-effect.html
需求是:用户点击搜索按钮查询后,这个表格显示出来,表格的页数大小或者当前页发生改变时重新去请求数据,
但是这个不是mounted事件,而且触发事件,用户不点击不执行,所以使用useEffect时,要禁止在页面初次渲染时去执行
有试过把执行方法放到return中去执行,想利用useEffect的清除机制去执行获取函数方法
useEffect(() => {
console.log('第一次执行')
retuen () => {
getSearchResult()
}
}, [pageIndex, currentPageSize]);
失败
原因是useEffect在每次执行的时候都会生成形成一个快照并保留下来(相当于Render),因此当状态变更而 Rerender 时,就形成了 N 个 Render 状态,而每个 Render 状态都拥有自己固定不变的 Props 与 State。
用清除机制去执行的话,总会去执行上一个快照保存的值(用户翻页到了第三页,但是获取的数据相当于用户翻页到了第二页的数据)
附上useEffect的清除机制,看注释就好,详情点击→(https://zh-hans.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update)
// Mount with { friend: { id: 100 } } props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange); // 运行第一个 effect
// Update with { friend: { id: 200 } } props
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange); // 运行下一个 effect
// Update with { friend: { id: 300 } } props
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 清除上一个 effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange); // 运行下一个 effect
// Unmount
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 清除最后一个 effect
由于没有找到好的方法,只能做个限制
// 刷新数据
const [isInit, setInit] = useState(true)
useEffect(() => {
if (isInit) {
setInit(false);
} else {
getSearchResult()
}
}, [pageIndex, currentPageSize]);
设置初始值isInit为true,当页面初次渲染时,isInit赋值为false,之后每次判断isInit的值就可以了
目前为止还算体面的解决方案吧,如果有更好的解决方法,告我一声,感激不尽