Question

我在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);

但是每次我运行该应用程序时，都会收到相同的错误：不变违规：在上下文或道具中都找不到存储

这是什么问题？我该如何解决？

Answer 1

存在问题，因为<Provider store={store}>应该包装在您的初始应用程序上下文中。 connect()是不可能的，因为此时商店尚未在您的父应用程序上下文中初始化，并且当状态本身在当前组件中设置时，它正在尝试将您的状态映射到prop。确保<Provider>包装在不需要connect()的组件中，如下所示：

export var store = createStore(userReducer);

ReactDOM.render(
  <Provider store={store}>
    <MyAppComponent />
  </Provider>,
  document.getElementById('root')
)

这时，connect()可以在您的任何子组件中使用，并且可以从商店中读取。

不变违规：在上下文或道具中均找不到存储

1 个答案: