react.js - 在render函数中状态更新了，但在事件函数内部取不到最新状态，如何更改？

Question

在render函数中状态更新了，为何在函数内部中取这个状态时，这个状态不是最新的？

下面使用了selectedKeys状态，我在render和函数内部都打印了，打印的结果可看最后一张图。问题出现在第二次调用，函数里面的selectedKeys不是上一次更新数据

const Notice = () => {
   const [selectedKeys, setSelectedKeys] = useState([]);
   const handleSwipeRight = (id: string) => {
      console.log('selectedKeys-in', selectedKeys);
      const isExist = selectedKeys.find((item) => item === id);
      let newKeys;

      if (isExist) {
         newKeys = selectedKeys.filter((item) => item !== id);
      } else {
         newKeys = [...selectedKeys, id];
      }
      setSelectedKeys([...newKeys]);
   };

   console.log('selectedKeys-out-正常更新', selectedKeys);

   return (
         {list.length === 0
            ? '暂无通知'
            : list.map((item) => {
                 let borderCls = '';
                 if (selectedKeys.includes(item._id)) {
                    borderCls = 'border-red-300';
                 }
                 console.log('selectedKeys', selectedKeys);
                 return (
                    <Card
                       key={item._id}
                       onSwipeRight={handleSwipeRight.bind(this, item)}
                       className={borderCls}
                    >
                       {item.msg}
                    </Card>
                 );
              })}
   );
};

export default Notice;

Card.tsx

import { CustomProps } from '@/types';
import { useTouch } from '@/hooks';

interface ICard extends CustomProps {
   isbadge?: boolean;
   isAnimate?: boolean;
}
const Card: React.FC<ICard> = ({
   children,
   isbadge,
   onSwipeLeft,
   onSwipeRight,
   isAnimate,
   className = '',
   ...rest
}) => {
   const { ref } = useTouch({ onSwipeLeft, onSwipeRight, isAnimate });

   let baseCls =
      'text-sm rounded-md py-1 px-2 bg-white border text-gray-700 relative ' +
      className;

   return (
      <div className={baseCls} ref={ref} {...rest}>
         {isbadge && (
            <div className="w-2 h-2 bg-red-400 rounded-full absolute -right-0.5 -top-0.5"></div>
         )}
         {children}
      </div>
   );
};

export default Card;

useTouch.ts

import { useEffect, useRef } from "react"

type Props = {
    onSwipeRight?: () => void
    onSwipeLeft?: () => void
    isAnimate?: boolean, // 是否加入滑动动画
    threshold?: number
}

// 注册左滑右滑事件
const useTouch = (props: Props) => {
    const ref = useRef<HTMLDivElement>()

    const startX = useRef(0);
    const startY = useRef(0);

    const handleTouchStart = (e) => {
        startX.current = e.touches[0].clientX;
        startY.current = e.touches[0].clientY;
    };
    const handleTouchEnd = (e) => {
        const deltaX = e.changedTouches[0].clientX - startX.current;
        const deltaY = e.changedTouches[0].clientY - startY.current;
        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
            props.onSwipeRight && props.onSwipeRight()
        } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
            props.onSwipeLeft && props.onSwipeLeft()
        }
        if (props.isAnimate) {
            ref.current.style.transition = 'transform 0.3s ease';
            ref.current.style.transform = 'translateX(0)';
        }
    };

    const handleTouchMove = (e) => {
        if (props.isAnimate) {
            const touchEndX = e.touches[0].clientX;
            const deltaX = touchEndX - startX.current;
            const threshold = props.threshold || 16

            if (Math.abs(deltaX) > threshold) {

                ref.current.style.transform = `translateX(${deltaX > 0 ? threshold : -threshold}px)`;
            }

        }
    }

    useEffect(() => {
        const dom = ref.current;
        if (!dom) return
        dom.addEventListener('touchstart', handleTouchStart);
        dom.addEventListener('touchmove', handleTouchMove);
        dom.addEventListener('touchend', handleTouchEnd);

        return () => {
            dom.removeEventListener('touchstart', handleTouchStart);
            dom.removeEventListener('touchmove', handleTouchMove);
            dom.removeEventListener('touchend', handleTouchEnd);
        };
    }, [])
    return {
        ref
    }
}

export default useTouch

打印内容

无

Answer 1

麻了，试了很多种写法，最后这样写正常了。但上面为什么不是最新的状态依旧是个谜

const handleSwipeRight = (id: string) => {
  setSelectedKeys((prev) => {
     if (prev.includes(id)) {
        return prev.filter((key) => key !== id);
     }
     return [...new Set([...prev, id])];
  });
};

Answer 2

代码中的 useEffect 只触发了一次，在 useEffect(, [加入依赖]) 就可以