React-Native：React-Navigation栈导航下Redux dispatch函数为undefined问题

嘿，我一眼就看出问题出在哪了——你在导航栈里用错了Login组件的版本！

问题根源 #

看你的UnAuthenticatedStack代码，你是这么导入Login组件的：

import { Login } from '../../../screens/Login';

但在你的Login组件文件里，经过Redux connect包装、能拿到storeUser的组件是作为默认导出的，而你导入的{ Login }是未经过任何Redux连接的原始类组件，它根本没有storeUser这个props，自然会报错说它不是函数。

快速解决方案 #

把导航栈里的导入改成默认导入就行：

// 去掉花括号，用默认导入
import Login from '../../../screens/Login';

备选方案（如果需要保留命名导出） #

如果你因为某些原因要保留原始组件的命名导出，可以在Login组件里把连接后的组件也做命名导出：

// 在Login组件文件末尾修改
const ConnectedLogin = connect(mapStateToProps, mapDispatchToProps)(Login);
// 导出原始组件和连接后的组件
export { Login, ConnectedLogin };

然后在导航栈里导入并使用连接后的版本：

import { ConnectedLogin } from '../../../screens/Login';

// 在Stack.Navigator里替换成ConnectedLogin
<Stack.Screen name="Login" component={ConnectedLogin}></Stack.Screen>

为什么直接调用组件正常？ #

你直接在App里写<Login></Login>时，用的应该是默认导入的、已经连接Redux的组件版本，所以能正常拿到storeUser。但导航栈里用的是未连接的原始组件，它的props里根本没有这个dispatch函数，打印出来就是undefined，调用当然会报错。

记住：React Navigation的Stack.Screen接收的component必须是已经和Redux连接好的组件，否则它无法获取到Redux store里的dispatch和state。

内容的提问来源于stack exchange，提问作者0x01Brain