Reactjs Can';无法通过Redux在componentDidMount中接收异步响应
最近,我在React/Redux(Thunk)方面遇到了一个棘手的问题:我已经用Action和Reducer正确地创建了我的存储,在我的组件中,我在componentDidMount方法中触发异步函数以更新状态,但是状态似乎没有改变,尽管在componentDidUpdate和MapStateTrops函数中确实改变了!为什么?这是我的密码:Reactjs Can';无法通过Redux在componentDidMount中接收异步响应,reactjs,redux,react-redux,axios,redux-thunk,Reactjs,Redux,React Redux,Axios,Redux Thunk,最近,我在React/Redux(Thunk)方面遇到了一个棘手的问题:我已经用Action和Reducer正确地创建了我的存储,在我的组件中,我在componentDidMount方法中触发异步函数以更新状态,但是状态似乎没有改变,尽管在componentDidUpdate和MapStateTrops函数中确实改变了!为什么?这是我的密码: export const getAllInterventions = () => { return dispatch => { dis
export const getAllInterventions = () => {
return dispatch => {
dispatch(getAllDataStart());
axios.get('/interventions.json')
.then(res => {
dispatch(getAllDataSuccess(res.data));
})
.catch(err => {
dispatch(getAllDataFail(err));
});
};
我的减速机:
case actionTypes.GET_ALL_INTERVENTIONS_SUCCESS:
return {
...state,
interventions: interventions: action.interventions
};
我的组成部分:
componentDidMount() {
this.props.getAllInterventions();
console.log('DidMount: ', this.props.inter); /*Empty Array Or Undefined */
}
const mapStateToProps = state => {
console.log('mapStateToProps', state);
return {
inter: state.interventions,
error: state.error
};
您的操作和状态更改都是异步的,执行
console.log
right-after将始终在这些更改实际完成之前返回
您的状态正在更新,这就是为什么在MapStateTops中使用console.log
时它会工作的原因
我建议设置redux开发工具,这样您就可以轻松跟踪您的操作/状态。我希望代码对您有用
componentWillReceiveProps(nextProps){
console.log(nextProps.inter)
}
case actionTypes.GET_ALL_interferences_SUCCESS:return{…state,interferences:interferences:action.interferences};请在reducer中检查上面的代码,我认为应该是干预:action.interferences抱歉,我刚才输入错误,我已经尝试了所有操作,但我遇到了相同的问题,我认为,就像在请求完成之前完成组件安装一样,我认为您需要某种微调器或指示器来显示未解决的承诺。您可以使用一些变量来喜欢加载:true,并在解析后将其设置为false。在render函数中使用相同的加载来显示微调器。我使用了redux devtool,我发现状态包含所有数据,但组件在第一次调用中无法接收完整状态,直到didUpdate!!!!是的,我这样做了,我发现状态有所有的数据,但是组件不能在第一次调用中收到完整的状态,直到didUpdate!!!!不确定您的意思…挂载上的组件发出http请求,完成呈现,然后一旦请求完成,它将使用请求返回的数据更新组件。您可能希望在成功/错误时传递另一个变量,以让组件知道数据已返回,并基于该数据呈现组件。