无法在 React-navigation 的 useFocusEffect 内部实现回调
Can not implement callback inside of useFocusEffect from React-navigation
我有带有 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 是一种好方法吗?或者,也许您可以向我推荐更好的方法,如何在用户更改选项卡时实现副作用?
看着你的代码,我很好奇(但不太确定)你可能引用了不正确的道具?
你介意试试这个吗?
因为功能组件的第一个参数是 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;
}
我有带有 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 是一种好方法吗?或者,也许您可以向我推荐更好的方法,如何在用户更改选项卡时实现副作用?
看着你的代码,我很好奇(但不太确定)你可能引用了不正确的道具?
你介意试试这个吗?
因为功能组件的第一个参数是 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;
}