React中如何获取最新state值？自定义Hook状态不更新问题

问题根因 #

这是React Hooks的闭包陷阱导致的：你定义的goToNextIndex方法捕获了当前渲染周期闭包中的tagIndex值，如果这个方法被外部缓存了旧的引用（比如放在空依赖的useEffect里、绑定到DOM事件后没解绑更新、用了防抖/节流包装没有更新依赖），后续调用时始终会拿到最初的tagIndex=0，计算出的updatedIndex永远是1，自然无法正常更新状态。

修复方案 #

方案1：使用状态更新的函数式写法（最通用） #

setTagIndex支持传入函数接收上一次的最新状态作为参数，不需要依赖当前闭包中的tagIndex值：

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

    const goToNextIndex = () => {
        setTagIndex(prevTagIndex => {
            const updatedIndex = prevTagIndex + 1;
            console.log(updatedIndex); // 在这里打印可以拿到最新的计算值
            return updatedIndex;
        });
    };
    
    return {
        tagIndex,
        goToNextIndex,
    };
}

如果需要在状态更新后做其他操作，可以单独加useEffect监听tagIndex变化：

useEffect(() => {
  console.log('tagIndex已更新为：', tagIndex);
  // 其他后续操作
}, [tagIndex])

方案2：用useCallback包裹方法更新引用 #

如果外部逻辑依赖goToNextIndex的引用稳定性，你可以用useCallback包裹方法，把tagIndex加入依赖项，保证每次tagIndex变化后方法引用同步更新，避免外部拿到旧函数：

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

注意：使用这个方案时需要确认外部调用goToNextIndex的逻辑也正确添加了该方法作为依赖，否则还是会拿到旧的引用。

内容的提问来源于stack exchange，提问作者アリ・ナディム