Redux- mapStateToProps不起作用

时间:2018-05-25 15:36:53

标签: javascript reactjs redux

我有一个react组件,它在componentWillMount中进行AJAX调用,并支持收到的数据以响应redux存储。这是代码

componentWillMount() {
  var self = this;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      console.log(this.responseText);
      var json = JSON.parse(this.responseText);
      var data = {
        json
      };
      self.props.dispatch({
        type: "ADD_Exams",
        data
      });
    }
  };
  xmlhttp.open("GET", "http://127.0.0.1:8000/getExams/", true);
  xmlhttp.send();
}

在reducer中,我将在操作中接收的数据分配给在reducer状态中定义的数组。

const initialState = {
  exams:[]    
}

const examreducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_Exams":
      return {
        ...state,
        exams: [...state.exams, action.data.json]
      };
    default:
      return state;
  }
};

但是当我使用mapStateToProps读取考试变量时,我得到了未定义。

const mapStateToProps = (state) => {
    return {
        exams: state.exams
    }
}

export default connect(mapStateToProps)(Exam); 

我正在创建像这样的商店

import { Provider } from "react-redux";
const store = createStore(loginReducer, examReducer);
ReactDOM.render(
  <Provider store={store}>
    <Exam />
  </Provider>,
  document.getElementById("root")
);

registerServiceWorker();

console.log(this.props.exams)打印undefined。这有什么问题?

4 个答案:

答案 0 :(得分:6)

我遇到了同样的问题。我的错误是因为我在导出/导入组件时做错了。

导出:

export class MyComponent extends React.Component
...
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

导入:

import { MyComponent } from './MyComponent';

为解决此问题,我删除了该类的导出并使用了默认值:

import MyComponent from './MyComponent';

答案 1 :(得分:1)

您可以像这样编辑mapStateToProps以查看您所在州的实际内容吗?

const mapStateToProps = (state) => {
   console.log(state);
    return {
        exams: state.exams
    }
}

我怀疑你的减速机不是减速机的根源。如果是这样,您可能需要执行state.examreducer.exams。 此外,您的组件是否包含在Provider中?您需要它来访问上下文(通过该上下文可以访问您的状态)。

<强>更新

确保在渲染任何React组件之前初始化您的商店。

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(combineReducers({loginReducer, examReducer}), {loginReducer:{}, examReducer:{}});
ReactDOM.render(
  <Provider store={store}>
    <Exam />
  </Provider>,
  document.getElementById('root')
)

然后更新您的mapStateToProps

const mapStateToProps = (state) => {
    return {
        exams: state.examReducer.exams || []
    }
}

答案 2 :(得分:1)

我认为在检索数据或初始化商店方面存在问题。试试这个:

import { createStore, combineReducers } from 'redux'
import loginReducer from '../path';
import examReducer from '../path';

const rootStore = combineReducers({
  loginReducer,
  examReducer
})

const store = createStore(rootReducer);

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

然后:

const mapStateToProps = (state) => {
    return {
        exams: state.examReducer.exams
    }
}

答案 3 :(得分:1)

我花了无数小时来寻找问题所在,为什么我的道具无法获得任何信息。

我跟随@Romain Pellerin并发现了一些东西

我最初的mapStateToProps是这样的:

const mapStateToProps = (state) => {


  return {
      userInfo: state.userInfo,
      loading: state.loading,
      error: state.error
  };

}

按照Romain的回答,我控制台登录并观看了我的状态对象的输出,发现我必须指定具有我需要访问的状态的特定reducer!因为我使用过CombineReducers,所以也许您必须在mapStateToProps中指定要访问的减速器。如此,我不得不将代码更改为此:

const mapStateToProps = (state) => {
    console.log(state);

    return {
        userInfo: state.THE_SPECIFIC_REDUCER.userInfo,
        loading: state.THE_SPECIFIC_REDUCER.loading,
        error: state.THE_SPECIFIC_REDUCER.error
    };
}

在我的代码中结合了reducers的地方:

const rootReducer = combineReducers({
  loginReducer,
  THE_SPECIFIC_REDUCER
});

S,鉴于我试图获取“ THE_SPECIFIC_REDUCER”状态,因此必须在mapStateToProps中指定它,如下所示:

myProp: state.THE_SPECIFIC_REDUCER.theThingIWantToAccess

我希望这对某人有用!