关于一开始输入关键字搜索没有自动更新的原因

来源：11-7 LoadMore上划加载更多-优化功能体验

Neolu4ever

2023-06-04

老师您好，我看到标题所示的情况后有个疑问，就是代码中 useEffect 已经对 searchParams 进行了监听，为什么 keyword 的改变会没有引起页面变化，而是需要特地把这个值提取出来单独监听呢？

另一方面 useLoadQuestionListData 中 useRequest 请求也是依赖于 searchParams 来判断是否重新发起请求。请问这里的依赖生效的的原因和上面的又有什么区别呢？

我能初步想到的一个可能原因是，searchParams 是一个本质上为 URLSearchParams 的实例，参数的字段值并不以键值对的形式存在于实例里，而只有一个 size 的属性被暴露出来，所以 useEffect 的依赖监听才没有生效。

请老师指正解惑，谢谢！

写回答

2回答

qq_暖若安阳_9

2024-10-02

针对第一个问题：我看到标题所示的情况后有个疑问，就是代码中 useEffect 已经对 searchParams 进行了监听，为什么 keyword 的改变会没有引起页面变化，而是需要特地把这个值提取出来单独监听呢？

我做下个人的答复：
通过断点调试可以发现，keyword 改变时是会触发useDebounceFn 防抖hook的，同样也会进入到函数执行，但是关键在于：

if (bottom <= document.body.clientHeight){

load();

}
这里不会触发执行，因为首次进入已经加载了10条数据，不触底的情况下，即使关键字发生变化，bottom <= document.body.clientHeight 仍然是不满足，无法执行获取更多数据，此时页面不会重新渲染，只能看到路由发生变化。
当我们重新监听keyword，重置 setList([]); 时 bottom <= document.body.clientHeight 立刻满足，便会重新初始化请求加载显示。