Question

作为文档https://reactnavigation.org/docs/en/next/use-focus-effect.html，

“有时我们希望在屏幕聚焦时产生副作用。副作用可能涉及添加事件侦听器，获取数据，更新文档标题等。”

每次用户访问该页面时，我都试图使用useFocusEffect来获取数据。

在我的组件上，我有一个函数，该函数使用redux调度操作以获取数据：

const fetchData = ()=>{ dispatch(companyJobsFetch(userDetails.companyId)); };

实际上，我正在使用useEffect钩子来调用fetchData()，但是我希望每次用户访问该页面时都获取数据，而不仅仅是在第一次呈现时。

从文档中尚不清楚如何使用useFocusEffect，而且在如何使用方面还没有成功。

有帮助吗？

Answer 1

文档向您展示了如何做到这一点。您需要用自己的东西替换API.subscribe：

useFocusEffect(
  React.useCallback(() => {
    dispatch(companyJobsFetch(userDetails.companyId));
  }, [dispatch, companyJobsFetch, userDetails.companyId])
);

Answer 2

对于版本反应导航4.x，可以使用addEvent监听器

useEffect(() => {
    if (navigation.isFocused()) {
      resetReviews(); // replace with your function
    }
  }, [navigation.isFocused()]);

或

useEffect(() => {
    const focusListener = navigation.addListener('didFocus', () => {
      // The screen is focused
      // Call any action
      _getBusiness({id: business?.id}); // replace with your function
    });
    return () => {
      // clean up event listener
      focusListener.remove();
    };
  }, []);

对于以后的版本5.x，可以使用钩子来实现

import { useIsFocused } from '@react-navigation/native';

// ...

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

如何使用useFocusEffect挂钩

2 个答案: