Javascript 未使用容器中的React-Redux（来自mapStateToProps）将数据传递到组件视图

我正在制作一个简单的“React-Redux”实现示例。但是，似乎由于某种原因，我并没有从商店获得应有的价值。此外，请注意：

• 控制台中没有错误或警告

• 在“home.js”（构造函数内部）中执行console.log时，传递的道具值显示为 未定义

我不知道为什么数据无法传递。有人能帮我吗

home.js

import React, {Component} from 'react';

class Home extends Component {

  constructor(){
    super();
    console.log("***", this.props);
  }

  render(){
    return (
      <div>
        <p>city: {this.props.city}</p>
        <p>Total Customers: {this.props.no_of_customers}</p>
      </div>
    )
  }
}

export default Home;

import {connect} from 'react-redux';
import Home from '../components/home';
import actions from '../redux/actions/index';

mapStateToProps = (state, ownProps) => {
  return {
    city: state.reducer2.city,
    name: state.reducer2.no_of_customers
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    addData(newData){
      dispatch(actions.add_item(newData));
    }
  }
}

export default connect(mapStateToProps, mapDispatchtoProps)(Home);

import { createStore } from 'redux';
import  rootReducer  from '../reducers/index';

const store = createStore (rootReducer);

export default store;

import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({reducer1, reducer2});

export default rootReducer;

const initialState = {
  total_customers: 999,
  city: "chicago"
};

const reducer2 = (state = initialState, action) => {

  switch(action.type){

    case "CHANGE_CITY": {
      return {
        ...state,
        city: "london"
      }
    }

    default: {
      return state;
    }
  }

}

export default reducer2;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/index';
import { Provider } from 'react-redux';

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

serviceWorker.unregister();

constructor(props){
  super(props);
  console.log("***", this.props);
}

store.js

import React, {Component} from 'react';

class Home extends Component {

  constructor(){
    super();
    console.log("***", this.props);
  }

  render(){
    return (
      <div>
        <p>city: {this.props.city}</p>
        <p>Total Customers: {this.props.no_of_customers}</p>
      </div>
    )
  }
}

export default Home;

import {connect} from 'react-redux';
import Home from '../components/home';
import actions from '../redux/actions/index';

mapStateToProps = (state, ownProps) => {
  return {
    city: state.reducer2.city,
    name: state.reducer2.no_of_customers
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    addData(newData){
      dispatch(actions.add_item(newData));
    }
  }
}

export default connect(mapStateToProps, mapDispatchtoProps)(Home);

import { createStore } from 'redux';
import  rootReducer  from '../reducers/index';

const store = createStore (rootReducer);

export default store;

import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({reducer1, reducer2});

export default rootReducer;

const initialState = {
  total_customers: 999,
  city: "chicago"
};

const reducer2 = (state = initialState, action) => {

  switch(action.type){

    case "CHANGE_CITY": {
      return {
        ...state,
        city: "london"
      }
    }

    default: {
      return state;
    }
  }

}

export default reducer2;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/index';
import { Provider } from 'react-redux';

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

serviceWorker.unregister();

constructor(props){
  super(props);
  console.log("***", this.props);
}

减速机/index.js

import React, {Component} from 'react';

class Home extends Component {

  constructor(){
    super();
    console.log("***", this.props);
  }

  render(){
    return (
      <div>
        <p>city: {this.props.city}</p>
        <p>Total Customers: {this.props.no_of_customers}</p>
      </div>
    )
  }
}

export default Home;

import {connect} from 'react-redux';
import Home from '../components/home';
import actions from '../redux/actions/index';

mapStateToProps = (state, ownProps) => {
  return {
    city: state.reducer2.city,
    name: state.reducer2.no_of_customers
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    addData(newData){
      dispatch(actions.add_item(newData));
    }
  }
}

export default connect(mapStateToProps, mapDispatchtoProps)(Home);

import { createStore } from 'redux';
import  rootReducer  from '../reducers/index';

const store = createStore (rootReducer);

export default store;

import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({reducer1, reducer2});

export default rootReducer;

const initialState = {
  total_customers: 999,
  city: "chicago"
};

const reducer2 = (state = initialState, action) => {

  switch(action.type){

    case "CHANGE_CITY": {
      return {
        ...state,
        city: "london"
      }
    }

    default: {
      return state;
    }
  }

}

export default reducer2;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/index';
import { Provider } from 'react-redux';

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

serviceWorker.unregister();

constructor(props){
  super(props);
  console.log("***", this.props);
}

reducer2.js

import React, {Component} from 'react';

class Home extends Component {

  constructor(){
    super();
    console.log("***", this.props);
  }

  render(){
    return (
      <div>
        <p>city: {this.props.city}</p>
        <p>Total Customers: {this.props.no_of_customers}</p>
      </div>
    )
  }
}

export default Home;

import {connect} from 'react-redux';
import Home from '../components/home';
import actions from '../redux/actions/index';

mapStateToProps = (state, ownProps) => {
  return {
    city: state.reducer2.city,
    name: state.reducer2.no_of_customers
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    addData(newData){
      dispatch(actions.add_item(newData));
    }
  }
}

export default connect(mapStateToProps, mapDispatchtoProps)(Home);

import { createStore } from 'redux';
import  rootReducer  from '../reducers/index';

const store = createStore (rootReducer);

export default store;

import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({reducer1, reducer2});

export default rootReducer;

const initialState = {
  total_customers: 999,
  city: "chicago"
};

const reducer2 = (state = initialState, action) => {

  switch(action.type){

    case "CHANGE_CITY": {
      return {
        ...state,
        city: "london"
      }
    }

    default: {
      return state;
    }
  }

}

export default reducer2;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/index';
import { Provider } from 'react-redux';

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

serviceWorker.unregister();

constructor(props){
  super(props);
  console.log("***", this.props);
}

index.js

import React, {Component} from 'react';

class Home extends Component {

  constructor(){
    super();
    console.log("***", this.props);
  }

  render(){
    return (
      <div>
        <p>city: {this.props.city}</p>
        <p>Total Customers: {this.props.no_of_customers}</p>
      </div>
    )
  }
}

export default Home;

import {connect} from 'react-redux';
import Home from '../components/home';
import actions from '../redux/actions/index';

mapStateToProps = (state, ownProps) => {
  return {
    city: state.reducer2.city,
    name: state.reducer2.no_of_customers
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    addData(newData){
      dispatch(actions.add_item(newData));
    }
  }
}

export default connect(mapStateToProps, mapDispatchtoProps)(Home);

import { createStore } from 'redux';
import  rootReducer  from '../reducers/index';

const store = createStore (rootReducer);

export default store;

import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({reducer1, reducer2});

export default rootReducer;

const initialState = {
  total_customers: 999,
  city: "chicago"
};

const reducer2 = (state = initialState, action) => {

  switch(action.type){

    case "CHANGE_CITY": {
      return {
        ...state,
        city: "london"
      }
    }

    default: {
      return state;
    }
  }

}

export default reducer2;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/index';
import { Provider } from 'react-redux';

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

serviceWorker.unregister();

constructor(props){
  super(props);
  console.log("***", this.props);
}

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“./redux/store/index”导入存储；
从'react redux'导入{Provider}；
ReactDOM.render(

我在完整的代码中找不到任何问题！
将代码更改为

Home.js

import React, {Component} from 'react';

class Home extends Component {

  constructor(){
    super();
    console.log("***", this.props);
  }

  render(){
    return (
      <div>
        <p>city: {this.props.city}</p>
        <p>Total Customers: {this.props.no_of_customers}</p>
      </div>
    )
  }
}

export default Home;

import {connect} from 'react-redux';
import Home from '../components/home';
import actions from '../redux/actions/index';

mapStateToProps = (state, ownProps) => {
  return {
    city: state.reducer2.city,
    name: state.reducer2.no_of_customers
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    addData(newData){
      dispatch(actions.add_item(newData));
    }
  }
}

export default connect(mapStateToProps, mapDispatchtoProps)(Home);

import { createStore } from 'redux';
import  rootReducer  from '../reducers/index';

const store = createStore (rootReducer);

export default store;

import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({reducer1, reducer2});

export default rootReducer;

const initialState = {
  total_customers: 999,
  city: "chicago"
};

const reducer2 = (state = initialState, action) => {

  switch(action.type){

    case "CHANGE_CITY": {
      return {
        ...state,
        city: "london"
      }
    }

    default: {
      return state;
    }
  }

}

export default reducer2;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/index';
import { Provider } from 'react-redux';

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

serviceWorker.unregister();

constructor(props){
  super(props);
  console.log("***", this.props);
}

在类组件中启动构造函数时，应在任何其他语句之前调用super（props）。否则，此.props将在构造函数中未定义。
请参阅此以获取更多信息。