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

Posted 2021-03-26

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