不变违规:无法在上下文或道具中找到商店

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()将在您的任何子组件中工作,并将从商店中读取。

以上是关于不变违规:无法在上下文或道具中找到商店的主要内容,如果未能解决你的问题,请参考以下文章

提供商无法访问redux商店

测试从上下文 api 消耗道具的反应组件期间的不变违规错误

不变违规:此导航器缺少导航道具

next.js + GraphQL:“不变违规:在上下文中找不到“客户端”或作为选项传入......”

在“连接(应用)”的上下文或道具中找不到“商店”

React/Redux 测试 - 在上下文或道具中找不到“商店”