setState 导致主题订阅内的内存泄漏

Question

第二次导航到TestPage 时遇到错误。该代码在第一次导航时运行良好，但在第二次导航时出现错误。

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我注意到，如果我删除 setinterval 块，错误不会发生。

来自 observable 的数据在 Text 中反映良好，但我无法理解导致此错误的原因。因此我的问题是为什么 setState 在可观察订阅中不起作用？

export const testSubject = new Subject<any>();
setInterval(() => {
    testSubject.next({ dest: 'any', msg: [] });
}, 2000);

function TestPage({ route, navigation }) {
    const [data, setData] = useState<any[]>([]);

    useFocusEffect(
        useCallback(() => {
            testSubject.subscribe(({ dest, msg }) => {
                setData(msg);
            });
            return () => _cleanup();
        }, []),
    );

    const _cleanup = () => {};

    return (
        <View>
            <Text>{JSON.stringify(data)}</Text>
            <Button
                onPress={() => {
                    navigation.navigate('home');
                }}
                title="back"
            />
        </View>
    );
}

export default TestPage;

Answer 1

我不确定useFocusEffect(useCallback(...)) 到底是什么，但我认为它相当于普通的useEffect。

您遇到的问题是当组件卸载时您没有清理对流的订阅。当 testSubject 有新更新时，旧实例（已卸载）将在卸载组件上调用 setData()，并且 react 会抱怨。

为什么_cleanup 函数什么都不做？你只需要完成它：

    useFocusEffect(
        useCallback(() => {
            const subscription = testSubject.subscribe(({ dest, msg }) => {
                setData(msg);
            });
            return () => {
                subscription.unsubscribe();
            }
        }, []),
    );

这应该可行。