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

Question

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)
        }

    })

下面是控制台的打印结果：

Answer 1

张轩 2020-11-14 22:52:50

同学你好 这是新版的 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

• 提问者 紫光丶 #1

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

Answer 2

张轩 2020-11-12 21:19:42

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

• 提问者 紫光丶 #1

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