Javascript 如何使用useFocusEffect钩子获取数据？

我是React Native的新手，刚刚升级到

React-navigation-5

我正在努力用新的hook

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]));

以下是旧函数：

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) 

请帮忙

---

您只需将

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]));

---

您只需将

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]));

---

嘿，Shubham，谢谢你的帮助。但是当我尝试你的方式时它显示错误谢谢你的更新。然而，当我尝试像那样将

myFunc

添加到

loadTrips

中时，

loadTrips

将不再是

承诺。由于我在
useffect
调用中将它用作
Promise
（问题中显示的代码底部），它将显示错误：未定义为对象（计算
loadTrips（）.then（）
）。当我试着这样做的时候，它确实显示出了错误。好吧，还有另一种方法可以解决这个问题。更新我对itHey Shubham的回答，谢谢你的帮助。但是当我尝试你的方式时它显示错误谢谢你的更新。然而，当我尝试像那样将
myFunc
添加到
loadTrips
中时，
loadTrips
将不再是
承诺。由于我在
useffect
调用中将它用作
Promise
（问题中显示的代码底部），它将显示错误：未定义为对象（计算
loadTrips（）.then（）
）。当我试着这样做的时候，它确实显示出了错误。好吧，还有另一种方法可以解决这个问题。更新我的答案