如何获取最新的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>