如何獲取最新的state值？ reactjs

Question

我在下面創建了簡單的自定義掛鈎。 我的問題是，state 似乎沒有更新。

當我調用goToNextIndex時，控制台總是記錄1

const useTag = () => {
    const [tagIndex, setTagIndex] = useState(0);

    const goToNextIndex = () => {
        const updatedIndex = tagIndex + 1;
        console.log(updatedIndex);
        setTagIndex(updatedIndex);
    };
    
    return {
        tagIndex,
        goToNextIndex,
    };
}

Answer 1

解決此問題的一種方法是讓useTag的消費者正確響應goToNextIndex function 的更改，因此它沒有陳舊的關閉 - 例如，始終使用 prop 值，而不是僅使用 mount 上的值，這將變得過時：

 const useTag = () => { const [tagIndex, setTagIndex] = React.useState(0); const goToNextIndex = () => { const updatedIndex = tagIndex + 1; console.log(updatedIndex); setTagIndex(updatedIndex); }; return { tagIndex, goToNextIndex, }; } const App = () => { const { tagIndex, goToNextIndex } = useTag(); return <button onClick={goToNextIndex}>{tagIndex}</button>; }; ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

如果可能，這種方法會更可取，因為代碼盡可能干凈——通常是可能的，但如果涉及異步代碼，偶爾也不會。

另一種方法是在setTagIndex回調中登錄：

 const useTag = () => { const [tagIndex, setTagIndex] = React.useState(0); const goToNextIndex = () => { setTagIndex((mostCurrentIndex) => { const updatedIndex = mostCurrentIndex + 1; console.log(updatedIndex); return updatedIndex; }); }; return { tagIndex, goToNextIndex, }; } const App = () => { const { tagIndex, goToNextIndex } = useTag(); return <button onClick={goToNextIndex}>{tagIndex}</button>; }; ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>