函數組件內的 React 非狀態變量不會立即更新

Question

我知道 React 的 useState 鈎子是異步的，所以如果我使用 useState 來存儲變量並在其上調用 set 函數，它可能不會立即更新。

但是現在我使用簡單的變量來存儲值，但變量值仍然沒有更新。 我該如何解決？

const List=(props)=>{
    let count = 1;
    const onNextButtonClick = ()=>{
        count  = count +1;
        console.log(count );
        updatePage();
    }
    return (
        //html
    )
}

我看到每當單擊下一個按鈕時 c 的值都沒有增加，並且我在控制台上獲得了相同的 c 值。

為什么會這樣？

Answer 1

count需要存儲在 state 中，並且因為 state 更新可能會被分組和異步處理，所以在下一次渲染之前你不會看到變化，這就是useEffect有用的地方。

 const { useEffect, useState } = React; function Example() { const [ count, setCount ] = useState(0); function onNextButtonClick() { setCount(count + 1); // the other thing } useEffect(() => { if (count) console.log(count); }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={onNextButtonClick}> Click me </button> </div> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>