Question

我正在编写带有react的代码，我刚开始使用redux（因为我需要一个容器的类型）。但是，我现在被困在一个地方。
我收到此错误 -

不变违规：无法在上下文中找到“存储”或 “连接（主页）”的道具。将根组件包装在一个，或明确地将“store”作为道具传递给 “连接（主页）。”

我尝试使用Google搜索，根据react-redux的troubleshooting section，可以使用以下三项来检查： 1.确保页面上没有重复的React实例 2.确保您没有忘记将根组件包装在＆lt;提供商取代。
3.确保您运行的是最新版本的React和React Redux

我有以下代码作为根（使用提供程序定义商店的位置） -

import React from 'react';
import { Router, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import routes from '../Routes';
import reducers from './reducers/reducers';
import actions from './actions/actions';

export default class AppRoutes extends React.Component {
  render() {

    const store = createStore(reducers, applyMiddleware(reduxThunk));
    return (
      <Provider store={store}>      
        <Router history={browserHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
      </Provider>
    );
  }
}

此错误仅发生在我拥有的两个组件之一 -

// No error when connected only in this component
import React from 'react';
import { connect } from 'react-redux';
import * as actions from './actions/actions';

class Dashboard extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return <h1>Hello, {this.props.isAuthenticated.toString()}</h1>;
  }
}

function mapStateToProps(state) {
  return { 
    content: state.auth.content,
    isAuthenticated: state.auth.authenticated
 };
}

export default connect(mapStateToProps, actions)(Dashboard);

// Error thrown when I try to connect this component
import React from 'react';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';
import Loading from './Loading';
import { connect } from 'react-redux';
import * as actions from './actions/actions';

class HomePage extends React.Component {

  constructor(props) {
    super(props);
    this.setState({ 
      loading: true
    });
  }

  render() {
    var inPage = undefined;
    if(this.props.isAuthenticated) {
      console.log('Logged in');
      inPage = <Dashboard user = {HomePage.user}/>;
    }
    else if (this.state.loading){
      console.log('Loading');
      inPage = <Loading />;
    }
    else {
      console.log('Login');
      inPage = <LoginPage />;
    }

    return (
      <div>
        {inPage}
      </div>
    );
  }    
}

function mapStateToProps(state) {
  this.setState({
    loading: false
  });
  return {
    content: state.auth.content,
    isAuthenticated: state.auth.authenticated
  }
}

export default connect(mapStateToProps, actions)(HomePage);

Answer 1

不确定这是否是您的问题所在。所以我可能会偏离基地。

但是，我会检查以确保你将孩子们传给你的组件。我这样做的方式是在我的App类中：

import React, {PropTypes} from 'react';
import { connect } from 'react-redux';

class App extends React.Component{
  render(){
    return(
      <div className="container-fluid">
        {this.props.children}
      </div>
    );
  }
}

App.propTypes={
  children: PropTypes.object.isRequired
};

export default connect()(App);

无法在上下文或道具

1 个答案: