反应：内容加载两次

Question

我创建了一个在点击时改变变量状态的按钮，问题是：当我点击它时，console.log 打印变量两次，我该如何避免这个问题？

我的代码：

    function List(){
        const [documents, setDocuments] = useState([])
        var [isToggled, setIsToggled] = useState(true)

        return (
            <div className={ isToggled ? "d-flex" : "d-flex toggled"} id="wrapper">
                { console.log(isToggled)}

                <div className="bg-light border-right" id="sidebar-wrapper">
                    <div className="sidebar-heading"> Rascunhos </div>
                    <div className="list-group list-group-flush">
                        <tr className="d-flex conteudo">
                            <td className="list-group-item descricao">Dashboard</td>
                            <td className="list-group-item qnt">1997</td>
                        </tr>
                    </div>
                <div className="btn-group">
                    <button className="btn btn-primary btnCarregar">Carregar</button>
                </div>
                </div>  
                <button className="btn btn-primary btnToggle ml-2 mt-2" onClick={ () => setIsToggled(!isToggled) } id="menu-toggle">></button>
            </div>
        )     
    }

Answer 1

我也遇到了这个问题，它与 StrictMode 的启用有关，当您创建一个新的 React 应用程序时，它会默认添加。起初它只发生在 Class 组件上，但现在也将成为功能组件的默认设置。这是在使用 useState 或其他 Hook 时设计的。

https://github.com/facebook/react/issues/15074

反应：内容加载两次

React: content loading twice

reactjs

dom

onclick

load