Reactjs React native:将组件添加到通过React导航和redux创建的所有屏幕中
我正在创建一个带有react导航和redux的react本机应用程序来管理状态。这是我的app.js文件:Reactjs React native:将组件添加到通过React导航和redux创建的所有屏幕中,reactjs,react-native,redux,react-navigation,Reactjs,React Native,Redux,React Navigation,我正在创建一个带有react导航和redux的react本机应用程序来管理状态。这是我的app.js文件: // all the imports... const store = createStore(combineReducers({ store: Store})); const ProfileScreenStore = connect(state => ({ store: state.store}))(ProfileScreen); const SensingScreenStor
// all the imports...
const store = createStore(combineReducers({ store: Store}));
const ProfileScreenStore = connect(state => ({ store: state.store}))(ProfileScreen);
const SensingScreenStore = connect(state => ({ store: state.store }))(SensingScreen);
const AppNavigator = createStackNavigator(
{
Profile: ProfileScreenStore,
Sensing: SensingScreenStore,
SensingTarget: SensingTargetScreen,
Navigation: NavigationScreen,
},
{
initialRouteName: "Profile"
}
);
const Navigation = createAppContainer(AppNavigator)
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Navigation />
</Provider>
);
}
}
但当我这样做时,我会收到错误消息:
> TypeError: Cannot read property 'error' of undefined
>
> This error is located at:
> in Error (at App.js:40)
> in Provider (at App.js:38)
> in App (at renderApplication.js:35)
> in RCTView (at View.js:45)
> in View (at AppContainer.js:98)
> in RCTView (at View.js:45)
> in View (at AppContainer.js:115)
> in AppContainer (at renderApplication.js:34)
我如何修复错误
编辑:根据要求,这里是Error.js的内容:
import React from "react";
import { View, Text } from "react-native";
export default class Error extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<View>
<Text style={{ color: 'red' }}>{this.props.store.error.message}</Text>
</View>
)
}
}
从“React”导入React;
从“react native”导入{View,Text};
导出默认类错误扩展了React.Component{
建造师(道具){
超级(道具)
}
render(){
返回(
{this.props.store.error.message}
)
}
}
编辑2:修复触发的错误问题似乎来自错误.js
组件,该组件试图访问this.props.store
,而this.props
未定义
您可能希望将组件连接到Redux存储以访问错误消息。比如:
函数MapStateTops(状态){
返回{message:state.error.message};
}
导出默认连接(MapStateTops)(错误);
其中state.error.message
是在减速机中定义的
然后您可以使用this.props.message
来显示错误消息。我们可以看到error.js
的内容吗?没错,我忘了将商店连接到错误组件!
import React from "react";
import { View, Text } from "react-native";
export default class Error extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<View>
<Text style={{ color: 'red' }}>{this.props.store.error.message}</Text>
</View>
)
}
}