我有一个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。这有什么问题?
答案 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
我希望这对某人有用!