javascript - Redux- mapStateToProps 不工作

Question

我有一个 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 读取 exams 变量时，我得到了 undefined。

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) 打印未定义。这里有什么问题？

Answer 1

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

导出:

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

导入:

import { MyComponent } from './MyComponent';

为了解决我删除了类上的导出并使用默认值:

import MyComponent from './MyComponent';