无法在 React-navigation 的 useFocusEffect 内部实现回调

Question

我有带有 topTabNavigator 和三个选项卡的 React-native 应用程序。当用户更改选项卡时，通常 componentDidMount 和 componentWillUnmount 生命周期方法不起作用。因此，我决定使用 React-Navigation 中的 onWillFocus 和 onDidFocus 作为副作用，而不是它们。在这个伟大的库 https://reactnavigation.org/ 的第 5 版之前，可以导入 NavigationEvents 组件并将其放入带有焦点回调的视图中：

import { NavigationEvents } from 'react-navigation';

class MyTeamScreen {
  const store = this.props.store;
  const members = store.members;

  return (
  <View>
    <NavigationEvents
      onWillFocus={payload => store.getTeamMebers()}
      onDidFocus={payload => store.dispose()}
    />
    <MymebersList team={members} />
  </View>
 );
}
export default MyScreen;

但是react reactnavigation库升级后目前没有这种方式，因为NavigationEvents被弃用了。而且只有一种使用useFocusEffect的方法。这是我的钩子：

function FetchMembers(store) {
  useFocusEffect(
  React.useCallback(() => {
      return () => store.getMembers();
    }, [store])
  );

  return null;
}

Class分量：

class MyTeamScreen {
  const store = this.props.store;
  const members = store.members;

  return (
  <View>
    <FetchMembers store={store} />
    <MymebersList team={members} />
  </View>
 );
}

但我收到错误消息：

而且我检查了商店已在钩子内部初始化，但它不能从中调用方法，因为它是未定义的。你能告诉我我做错了什么吗？使用反应导航方法而不是生命周期 componentDidMount 和 componentWillUnmount 是一种好方法吗？或者，也许您可以向我推荐更好的方法，如何在用户更改选项卡时实现副作用？

Answer 1

看着你的代码，我很好奇（但不太确定）你可能引用了不正确的道具？

你介意试试这个吗？因为功能组件的第一个参数是 props。要引用 props.store，你可以像这样使用对象解构

function FetchMembers({store}) {
  useFocusEffect(
  React.useCallback(() => {
      return () => store.getMembers();
    }, [store])
  );

  return null;
}

或

function FetchMembers(props) {
  useFocusEffect(
  React.useCallback(() => {
      return () => props.store.getMembers();
    }, [props.store])
  );

  return null;
}

无法在 React-navigation 的 useFocusEffect 内部实现回调

Can not implement callback inside of useFocusEffect from React-navigation

react-native

react-hooks

react-navigation

side-effects

react-lifecycle