如何使用 useFocusEffect 挂钩来获取数据？

Question

我是 React Native 的新手，刚刚升级到 react-navigation-5

我正在努力用新的钩子 useFocusEffect 替换旧的 listener 函数

这是旧函数：

const loadTrips = useCallback(async() => {
        setError(null);
        setIsRefreshing(true);
        try {
            dispatch(tripActions.fetchTrip());
        } catch (error) {
            console.log(error);
            setError(error.message);
        }
        setIsRefreshing(false);
    },[dispatch, setIsRefreshing, setError]);
*********************************************************
// This is the old function
    useEffect(() => {
        const willFocus = props.navigation.addListener(
            'willFocus',
            loadTrips
        );
        return () => {willFocus.remove();}
    },[loadTrips]);
*********************************************************

    useEffect(() => {
        setIsLoading(true);
        loadTrips().then(
            setIsLoading(false),
        );
    }, [dispatch, loadTrips])

编辑 1

我试图将loadtrips 函数传递给useFocusEffect，但它显示错误

useFocusEffect(loadTrips) 

请帮忙

Answer 1

您可以简单地将loadTrips 函数传递给useFocusEffect

const loadTrips = useCallback(async() => {
        setError(null);
        setIsRefreshing(true);
        try {
            dispatch(tripActions.fetchTrip());
        } catch (error) {
            console.log(error);
            setError(error.message);
        }
        setIsRefreshing(false);
    },[dispatch, setIsRefreshing, setError]);
useFocusEffect(useCallback(() => loadTrips(), [dispatch, setIsRefreshing, setError]));