React Hooks中usePrevious获取prevState为undefined问题求助

你出错的几个关键点： #

1. 多余的本地状态flagVisible：完全没必要把useSelector拿到的visible再存成本地state，这层冗余不仅没用，还会导致状态不同步，让usePrevious拿到的不是你真正需要的Redux中visible的历史值。
2. 空的依赖数组：你的useEffect依赖数组是空的，意味着它只会在组件挂载时执行一次。此时usePrevious内部的useEffect还没来得及更新ref的值，所以preVisible是undefined；而且后续Redux中visible变化时，这个useEffect也不会重新触发。
3. 错误的usePrevious参数：你传给usePrevious的是flagVisible，但这个值只在初始化时赋值，后续没有更新，自然拿不到正确的历史值。

正确的实现代码 #

首先保留你的usePrevious Hook（这个逻辑是对的）：

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]); 
  return ref.current;
}

然后重构组件逻辑：

const visible = useSelector((state) => state.visible);
// 直接把Redux中的visible传给usePrevious
const preVisible = usePrevious(visible);

useEffect(() => {
  // 跳过第一次渲染（对应类组件componentDidUpdate不执行挂载逻辑）
  if (preVisible === undefined) return;
  
  // 当visible发生变化时执行逻辑
  if (preVisible !== visible) {
    // 这里写你需要的业务逻辑，比如：
    console.log('visible状态变化：', preVisible, '→', visible);
  }
}, [visible, preVisible]); // 必须添加依赖，保证状态变化时触发effect

逻辑说明 #

• usePrevious直接接收useSelector返回的visible，每次Redux中visible更新时，usePrevious内部的useEffect会把新值存入ref，下一次组件渲染时就能拿到上一轮的visible值。
• useEffect的依赖数组包含visible和preVisible，确保每当这两个值有一个变化时，effect都会重新执行，对应类组件中componentDidUpdate的触发时机。
• 增加preVisible === undefined的判断，是因为第一次渲染时preVisible还没有历史值，这一步可以跳过，和类组件中componentDidUpdate不会在挂载阶段执行的行为保持一致。

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