反应：内容加载两次

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应用程序时会添加StrictMode。最初，它仅在类组件上发生，但现在也将默认为功能组件。使用useState或其他Hooks时，这是设计使然。

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