number在useEffect中打印结果，被多加了一次

来源：5-3 FileSearch 组件（二）

紫光丶

2020-11-11

const FileSearch = ({title, onFileSearch}) => {
    const [inputActive, setInputActive] = useState(false);
    const [value, setValue] = useState('');

    const closeSearch = (e) => {
        e.preventDefault();
        setInputActive(false);
        setValue('')
    }
    let num = useRef(0)
    console.log('FileSearch-num-start,',num.current)

    num.current++
    console.log('FileSearch-num-end,',num.current)

    useEffect(() => {

        console.log('useEffect-num,',num.current)

        const handleInputEvent = (event) => {
            const {code} = event;//Escape ,Enter
            if (code === 'Enter' && inputActive) {
                onFileSearch(value)
            } else if (code === 'Escape' && inputActive) {
                closeSearch(event)
            }
        }
        document.addEventListener('keyup', handleInputEvent)
        return () => {
            document.removeEventListener('keyup', handleInputEvent)
        }

    })

下面是控制台的打印结果：
图片描述

写回答

2回答

张轩

2020-11-14

已采纳

同学你好这是新版的 create-react-app 在根组件中添加了

<React.StrictMode> 这个节点。这个节点会造成渲染两次（开发环境下出现，为了更好的定位bug，生产环境不会出现这个问题）

main.js

ReactDOM.render(
<React.StrictMode>
    <App />
  </React.StrictMode>,
rootElement
);

把这个节点删除了，就正常了。参考我给你写好了代码：https://codesandbox.io/s/icy-meadow-kqhwz?file=/src/index.js

紫光丶

感谢老师！刚才看了文档，严格模式会进行双调方法用于检查bug。是这个的问题。

2020-11-14

共1条回复

张轩

2020-11-12

同学你好请稍微描述的详细一点后面触发的打印是什么样的操作触发的呢？是在 input 中输入内容嘛？如果能把这个文件所有的代码都提供给我就更好啦。

紫光丶

https://gitee.com/like_text/like-electron-react.git 老师你好，这里是仓库地址。FileSearch组件每次重新渲染的时候number的值都会多+1,但是打印只打印了一次

2020-11-12

共1条回复

2024更新 Electron+React+七牛云实战跨平台桌面应用

开发一款自动云同步的 Markdown 文件管理软件

1252 学习 · 463 问题

查看课程

相似问题

您好，请问DogShwoWithHook组件中打一个console.log()在控制台中发现会被多次打印，这个是为什么啊？不会影响性能吗？

回答 1

关于fileSearch多次调用的问题

回答 2

useFef的问题

回答 1

第一次加载会调用两次

回答 1

useMemo 和 useEffect 区别?

回答 1

打开慕课网App查看更多内容