使用效果看不到状态

Question

我正在处理连续通知（每 3 秒一次，最多 1 分钟），直到用户接受挂起的订单。

这是我的代码。 usePrevious 是自定义挂钩，它为我提供了先前的状态值。

我不介意为什么setTimeout执行clearInterval()时，'notification'为null。此问题导致声音循环。

[.....]
    const [notification, setNotification] = useState(null)

    const previousOrderCount = usePrevious(newOrderCount)
    const previousPendingReservationsLength = usePrevious(
        pendingReservationsLength
    )

    const isToneActive = useRef(false)

    // sound notify for new orders
    useEffect(() => {
        if (
            !isToneActive.current &&
            newOrderCount > previousOrderCount &&
            user?.profile?.role === "manager"
        ) {

            // this prevent multiple triggers of sound
            isToneActive.current = true

            setNotification(setInterval(() => playNotification(), 3000))
            setTimeout(() => {
                clearInterval(notification)
                isToneActive.current = false
            }, 60000)
        }
    }, [
        newOrderCount,
        playNotification,
        user,
        previousOrderCount,
        stopNotify,
        notification,
        setNotification,
    ])

[....]

Answer 1

我会使用另一个 React ref 来保存对间隔计时器的引用。这里的问题是 React 状态更新是异步的，所以 setNotification 状态更新不会立即更新包含当前 null 状态的 setTimeout 回调的 notification 状态值。

const notificationRef = React.useRef(null);

...

notificationRef.current = setInterval(() => playNotification(), 3000);
setTimeout(() => {
  clearInterval(notificationRef.current);
  notificationRef.current = null;
  isToneActive.current = false;
}, 60000);

使用效果看不到状态

Use effect doesn't see state

reactjs

settimeout

setinterval

use-state

clearinterval