不变违规:无法在上下文或道具中找到商店
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不变违规:无法在上下文或道具中找到商店相关的知识,希望对你有一定的参考价值。
我在Login.js中创建了一个商店,当用户登录时,用户名会发送到商店。然后在Profile.js中我得到这个用户名并进行渲染。
这是代码的样子:
Profile.js
import { connect, Provider } from "react-redux";
function mapStateToProps (state) {
return {
user: state.user
}
}
export class Profil extends React.Component {
render() {
return (
<Provider store={store}>
<View>
<Header
centerComponent={{ text: 'Profil', style: { color: '#FF0000', fontSize: 20, fontWeight: 'bold' } }}
outerContainerStyles={{ backgroundColor: '#ffffff' }}
/>
<Text>Willkommen { this.props.user } </Text>
</View>
</Provider>
);
}
}
export default connect(mapStateToProps)(Profil)
Login.js
body: JSON.stringify({
email: UserEmail,
password: UserPassword,
name: UserName
})
}).then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if(responseJson === 'Data Matched')
{
//Then open Profile activity and send user email to profile activity.
this.props.navigation.navigate("Tabs");
store.dispatch({
type: 'ADD_USER',
user: { Name: UserName }
});
}
....
var userReducer = function(state, action) {
if (state === undefined) {
state = [];
}
if (action.type === 'ADD_USER') {
state.push(action.user);
}
return state;
}
export var store = createStore(userReducer);
但每当我运行应用程序时,我都会收到相同的错误:不变违规:无法在上下文或道具中找到商店
这有什么问题?我该如何解决?
答案
存在问题,因为<Provider store={store}>
应该包含在您的初始应用程序上下文中。 connect()
是不可能的,因为此时商店尚未在您的父应用程序上下文中初始化,并且它正在尝试将状态映射到props,当状态本身在当前组件中设置时。确保<Provider>
包含在一个不需要connect()
的组件中,如下所示:
export var store = createStore(userReducer);
ReactDOM.render(
<Provider store={store}>
<MyAppComponent />
</Provider>,
document.getElementById('root')
)
此时,connect()
将在您的任何子组件中工作,并将从商店中读取。
以上是关于不变违规:无法在上下文或道具中找到商店的主要内容,如果未能解决你的问题,请参考以下文章