Redux-mapStateToProps 不工作答案

【问题标题】：Redux- mapStateToProps not workingRedux-mapStateToProps 不工作
【发布时间】：2018-11-05 01:24:05
【问题描述】：

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

【问题讨论】：

代码中的 console.log 在哪里？
在控制台上打印“/static/media/examReducer.d41d8cd9.bin”。
如何初始化存储？
它在组件的渲染函数中
通过像这样调用 createStore const store = createStore(loginReducer,examReducer);

标签： javascript reactjs redux

【解决方案1】：

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

出口：

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

导入：

import { MyComponent } from './MyComponent';

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

import MyComponent from './MyComponent';

【讨论】：

请更深入地解释问题发生的原因。比如谈developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
这只是结束了我 4 小时试图在 redux、thunk 和存储东西上敲我的头。
谢谢队友，这正是我的问题，intelliJ 用 { AbcComponent } 自动导入它，通过使用连接到 Redux 的默认组件解决！ :)

【解决方案2】：

我花了无数个小时找出问题所在，为什么我的道具没有得到任何信息。

我关注了@Romain Pellerin，发现了一些东西

我最初的 mapStateToProps 是这样的：

const mapStateToProps = (state) => {


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

}

按照 Romain 的回答，我在控制台记录并观察了我的状态对象的输出，发现我必须指定具有我需要访问的状态的特定减速器！因为我使用了 combineReducers，也许你必须在 mapStateToProps 中指定要访问的 reducer。所以我不得不把我的代码改成这样：

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
    };
}

这是我结合减速器的代码：

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

Soo，鉴于我试图获得“THE_SPECIFIC_REDUCER”状态，我必须像这样在 mapStateToProps 中指定它：

myProp: state.THE_SPECIFIC_REDUCER.theThingIWantToAccess

我希望这对某人有用！

【讨论】：

您为我节省了数小时的挫败感。谢谢路易斯！
太棒了，这应该是一个可以接受的答案

【解决方案3】：

您可以像这样编辑您的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 || []
    }
}

【讨论】：

将“/static/media/examReducer.d41d8cd9.bin”打印到控制台
这怎么可能？能否请您显示控制台的屏幕截图？
createStore 有另一个参数
从'react-redux'导入{Provider}； const store = createStore(loginReducer,examReducer); ReactDOM.render( ,document.getElementById("root"));注册服务工作者（）；我正在这样做
考试：state.examReducer.exams 导致“无法读取未定义错误的属性”

【解决方案4】：

我认为检索数据或初始化存储的方式存在问题。试试这个：

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
    }
}

【讨论】：