时间戳

首页 > 解决方案 > 模糊侦听器的回调无法识别状态值

javascript - 模糊侦听器的回调无法识别状态值

问题描述

在我的反应原生组件中，我有两个按钮

            <Button
                title='Start moving'
                onPress={() => {
                    setIntervalId(startMoving(addLocation))
                }}
            />
            <Button
                title='Finish moving'
                onPress={() => {
                    stopMoving(intervalId);
            />

startMoving 和 stopMoving 在哪里

export const startMoving = () => {
    var intervalId = setInterval(() => {
        //… Do something
    }, 1000);
    return intervalId;
};

export const stopMoving = (intervalId) => {
    clearInterval(intervalId);
};

可以看到，startMoving返回setInterval返回的intervalId，并将其保存在一个状态

    const [intervalId, setIntervalId] = useState(0)

当我按下完成移动按钮时，它会使用 intervalId 的值调用 stopMoving。在这里，它工作得很好

但是我想在用户导航到另一个组件时停止移动，然后，我声明了事件模糊：

    useEffect(() => {
        const blurOff = navigation.addListener('blur', stopMovingId);
        return () => {
            blurOff;
        };
    }, [navigation]);

其中 stopMovingId 基本上使用 intervalId 的值调用 stopMoving

    const stopMovingId = () => {
        stopMoving(intervalId)
    }

（我不知道如何设置 navigation.addListener('blur', stopMoving... 应该使用参数 intervalId 调用 stopMoving）

问题是当blur事件执行 stopMovingId() 时，它作为intervalId发送的值是 0，而不是状态intervalId的值

拉斐尔

标签： javascriptcallbacksetinterval

解决方案

好的，我认为这是一个范围问题。当useEffect被调用时，它会将处理程序设置为stopMovingId具有对该函数的引用intervalId但对该函数的引用以及随后该状态值不会在状态更改时更新。

请尝试以下方法：

useEffect(() => {
        const blurOff = navigation.addListener('blur', () => stopMoving(intervalId));
        return () => {
            blurOff();
        };
    }, [navigation, intervalId]);

推荐阅读