自己做的useDebounce的demo，输入时会少数据后一段
来源：9-8 老瓶新酒 - 使用自定义Hook实现 函数防抖
菜鸟x
2020-07-14
老师你好像不太爱看回复。所以我就重发一遍了…
https://gitee.com/namerirong/lightship 这是demo的仓库（之前的手贱加了个路由，现在这次改回去应该没问题了）。
如果把useEffect里面的代码修改一下
if (useDebounceValue && triggerSearch.current) {
//这种写法会出现上图的情况
// setListData(list => {
// list.push(useDebounceValue)
// console.log('useDebounceValue: ', useDebounceValue)
// return list
// })
// 修改后，用这种写法是正常的，但不能处理复杂数据
setListData(listData => […listData, useDebounceValue])
}
，是能正常使用，但是我发现每输入一次，这个组件连续渲染了四次了，这是因为react本身的原因吗（你在上一个问答中说了会因为hook的引入会再渲染一次，可这个渲染了四次）？而且我上面有写法是能正常输出了，但是这个listData就不能随意在哪个位置添加数据。遇到再复杂一点的数据就不能用[…listData， ]这种写法了。例如[{},{}]这种结构，要修改里面某一项对象的某一个属性时
1回答
-
同学你好 看到你的新的代码了
先将 index.tsx 中的 React.StrictMode 删掉。
- <React.StrictMode> <App /> - </React.StrictMode>,
然后来到 home 中感受
在 input 中输入一个值
首先 setInputValue 触发一次渲染
然后 setDebounceValue 触发第二次渲染
然后 setListData 触发第三次渲染，这就是三次渲染的来源，截图如下
032020-07-15
相似问题