模仿老师的debounce做了一个小demo，但最后一个段输入的没有显示
来源：9-8 老瓶新酒 - 使用自定义Hook实现 函数防抖
菜鸟x
2020-07-10
https://gitee.com/namerirong/lightship 这是demo的仓库。而且这个组件第一次挂载的时候，这个函数组件执行了两次。然后当debounce更改的时候，useEffect也执行了两次
2回答
-
张轩
2020-07-13
同学你好 渲染两遍很是这个问题 https://coding.imooc.com/learn/questiondetail/176598.html
最新版的 create-react-app 创建的 index.js 根文件有变化。它会多包裹一个 react strictmode。https://zh-hans.reactjs.org/docs/strict-mode.html
附：clone 了你的 repo，跑起来首页是空的，不知道为啥，没详细看代码
012020-07-13 -
菜鸟x
提问者
2020-07-13
如果把useEffect里面的代码修改一下
if (useDebounceValue && triggerSearch.current) {
// setListData(list => {
// list.push(useDebounceValue)
// console.log('useDebounceValue: ', useDebounceValue)
// return list
// })
// 修改后
setListData(listData => [...listData, useDebounceValue])
}
，是能正常使用，但是我发现每输入一次，这个组件连续渲染了四次了，这是因为react本身的原因吗？而且我上面有写法是能正常输出了，但是这个listData就不能随意在哪个位置添加数据。遇到再复杂一点的数据就不能用[...listData， ]这种写法了。例如[{},{}]这种结构，要修改里面某一项对象的某一个属性时
00
相似问题