不能在React-navigation的useFocusEffect中实现回调。

Question

我有一个React-native应用，有三个标签的topTabNavigator。通常当用户改变标签时，componentDidMount和componentWillUnmount的生命周期方法就不工作了，因此我决定使用React-Navigation的onWillFocus和onDidFocus来代替它们。因此，我决定使用React-Navigation中的onWillFocus和onDidFocus方法来代替它们。而在这个伟大的库的第5版之前 https:/reactnavigation.org。 可以导入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;

但目前在reactnavigation库升级后，没有这样的方式，因为NavigationEvents已经过时了。只有一种方法可以使用FocusEffect。这就是我的钩子。

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

  return null;
}

类组件。

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

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

但我收到了错误信息

我检查了在钩子里初始化了存储，但不能调用它的方法，因为它是未定义的。 你能告诉我我做错了什么吗？使用react-navigation方法而不是lifeecycles componentDidMount和componentWillUnmount是一个好方法吗？或者你可以向我推荐更好的方法，当用户改变标签时，如何实现副作用？

Answer 1

看了你的代码，我很好奇(但不太确定)，你可能引用的道具不对？

你介意试试吗？因为功能组件的第一个参数就是道具。要引用 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;
}