React自定义Hook首次点击失效，如何修复陈旧闭包问题？

问题根源 #

你遇到的首次点击失效问题，核心是陈旧闭包导致的：toggle函数里的count是组件初始渲染时捕获的旧值（0），调用setCount后状态更新是异步的，此时setItem(arr[count])仍然用的是旧的count=0，所以item没变化；后续点击时，闭包捕获的是上一轮更新后的count，所以看起来功能恢复，但这是巧合，逻辑存在隐患。

另外，你不需要单独维护item状态，完全可以通过count计算得到当前项，避免状态同步问题，这是更简洁可靠的方案。

修复方案 #

方案一：移除冗余的item状态（推荐）

直接通过count从传入数组中计算当前项，彻底消除状态同步问题和闭包隐患：

const { useState } = React;

function useToggleItems(arr) {
    const [count, setCount] = useState(0);

    function toggle() {
        setCount(prevCount => {
            return prevCount < arr.length - 1 ? prevCount + 1 : 0;
        });
    }

    // 直接通过count推导当前项，无需单独维护状态
    const currentItem = arr[count];
    return [currentItem, toggle];
}

function App() {
    const [item, toggle] = useToggleItems([1, 2]);

    return (
        <div className="App">
            <h1>{item}</h1>
            <button onClick={toggle}>切换</button>
        </div>
    );
}

ReactDOM.createRoot(document.querySelector("#root")).render(<App />);

方案二：保留item状态，同步更新逻辑

如果一定要保留item状态，利用setCount的函数式更新特性，在回调中获取最新count值后同步更新item：

const { useState } = React;

function useToggleItems(arr) {
    const [count, setCount] = useState(0);
    const [item, setItem] = useState(arr[count]);

    function toggle() {
        setCount(prevCount => {
            const nextCount = prevCount < arr.length - 1 ? prevCount + 1 : 0;
            // 用最新的nextCount设置item，保证状态同步
            setItem(arr[nextCount]);
            return nextCount;
        });
    }

    return [item, toggle];
}

function App() {
    const [item, toggle] = useToggleItems([1, 2]);

    return (
        <div className="App">
            <h1>{item}</h1>
            <button onClick={toggle}>切换</button>
        </div>
    );
}

ReactDOM.createRoot(document.querySelector("#root")).render(<App />);

生效逻辑说明 #

• 方案一：去掉冗余的item状态，直接通过count推导当前项，从根源上避免了状态不同步和闭包捕获陈旧值的问题，代码更简洁。
• 方案二：借助setCount的函数式更新，在回调中获取到最新的prevCount，计算出nextCount后直接用它更新item，确保item和count状态完全同步，不再依赖闭包中的旧值。

依赖的HTML代码 #

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

<div id="root"></div>

内容的提问来源于stack exchange，提问作者Snehil Agrahari