在我的react应用程序中,我有三个并行组件。在我的第一个组件中,我正在进行API调用,并根据响应将流路由到已验证或未验证的组件。
一旦用户被路由到已验证的组件,就会有一个单击按钮,用户应该被重定向到另一个组件,该组件应将API响应(第一个组件)中的数据显示为键值对。我正在使用Redux进行状态管理。
我面临的问题是数据是作为空对象从存储中分派的。我不确定哪里出错了,但当我调试应用程序时,我发现操作没有被分派到商店,它总是返回给我初始状态。
action.js-
export const setPoiData = (poiData) => dispatch => {
console.log('inside actions');
dispatch({
type: SET_POI_DATA,
payload: poiData
})
}
Reducer.js-
const initialState = {
poiData: {},
}
const reducerFunc = (state = initialState, action) => {
switch (action.type) {
case SET_POI_DATA:
console.log('inside poi reducers');
return {...state,poiData: action.payload}
default: return {...state}
}
}
Component 1-
//API call
详图构件-
为了从存储中获取数据,我做了如下操作-
componentDidMount() {
console.log(this.props.poiData)
}
function mapStateToProps(state) {
return {
poiData: state.poiData,
}
}
const mapDispatchToProps = dispatch => ({
setPoiData(data) {
dispatch(setPoiData(data));
}
})
我不确定我错在哪里。有人能建议我如何继续做这件事吗?
发布于 2018-11-26 14:59:58
在componentDidMount()中,您必须像这样调用this.props.setPoiData(<your data here>);
的操作
https://stackoverflow.com/questions/53483615
复制相似问题