form和 page 都在依赖里, 但是 form 改变时, 希望使用 page 1 来请求,请问该如何阻止代码?

[vaynevayne]

useAsyncEffect(()=>{

request(form,page,pageSize)
 // 但 form 改变时, 希望使用 重置 page =1, 
// 但是在这个 hook 里,很难知道是谁改变了, 
// 另外 form 改变了, 我修改 page, 导致 page 改变, 就会有两次请求, 但是只需要一次

},

[form, page,pageSize])

[liuyib]

不要把 useEffect 钩子当成监听器，这是一种不好并且不推荐的 React 编程方式。

对于你的这个需求，你应该改成：把 request 封装到一个接收参数的函数中，例如叫 onGetData，在需要发起该请求的地方，手动调用 onGetData，并按需传参。

而不应该像示例这样，把发请求的逻辑放到 useEffect 里，然后各种发请求的情况都通过改变 state 去触发（这就是把 useEffect 当成了监听器），存在的问题已经显而易见了，你分不清哪个 state 改变导致的触发，你也控制不了触发了多少次，依赖多了以后，重复发请求的情况没法控制。

[vaynevayne]

多谢, 但是我这个需求还是需要监听的, form 是来源于 props,page 来源于 state, 需求是: 当 props.form 改变时,需要重置state.page =1, 再发起请求, 并且请求使用的是 useSWR 这种类似effrect 依赖的库,为了缓存

不使用 swr 这样是可以的

const [page,setPage] = useState(1)
useEffect(()=>{
setPage(1)
onGetData({
page:1
})

},[props.form])

但是用了 swr, 就不行了, swr 就跟 useEffect 这种毒瘤一样, 导致的问题是, form 变了会请求一次, page 变了又请求一次, 这是不是无解的啊?

我本质上是需要缓存历史请求的数据, 除了 swr, 是否还有其他好用的库可以做到的?

[liuyib]

确实有些库需要用依赖数组来控制请求行为，那就不得不直面各种依赖问题了。

可以这样考虑（仅供参考，我也不清楚你具体业务代码，说的不一定准确）：区分下变动的量，哪些变动后直接参与请求的发送，那么这些量就可以放在请求的依赖数组中。像你的这个 props.form 它就不是直接参与，而是甚至请求参数里都没有它（猜的），就不应该允许它的变动直接影响到请求是否发送。

代码如下，可以拆成两个 useEffect：

useEffect(() => {
  setPage(1);
}, [props.form])

useEffect(() => {
  onGetData(page);
}, [page]);

这只是我从目前提供的线索中能想到的方案了，仅供参考。

总之，一旦依赖数组变动出了问题，那么你就需要重新考虑目前的逻辑组织了。

我本质上是需要缓存历史请求的数据, 除了 swr, 是否还有其他好用的库可以做到的?

这一点，ahooks 的 useRequest 可以缓存数据，react-query 好像也可以。

[vaynevayne]

不是直接参与，就不应该允许它的变动直接影响到请求是否发送。

好主意, 这是我没想到的, 看起来不错 多谢