使用 Redux 无法在 componentDidMount 中接收异步响应

Posted 2023-02-22

【中文标题】使用 Redux 无法在 componentDidMount 中接收异步响应

【英文标题】：Can't receive Async response in componentDidMount with Redux

【发布时间】：2019-02-04 20:07:57

【问题描述】：

最近我在使用 React/Redux (Thunk) 时遇到了一个棘手的问题：我已经用 Action 和 Reducer 正确地创建了我的 Store，在我的组件中我触发了 componentDidMount 方法中的 Async 函数以更新状态，但是状态似乎没有改变，尽管它在 componentDidUpdate 和 mapStateToProps 函数中发生了变化！为什么 ？这是我的代码：

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
;

【问题讨论】：

case actionTypes.GET_ALL_INTERVENTIONS_SUCCESS: return ...state, 干预：interventions: action.interventions ;请检查reducer中的上述代码我认为应该是干预：action.interventions

不抱歉，我打错了，我已经尝试了所有操作，但我遇到了同样的问题，我认为组件在请求完成之前完成安装

我认为您需要某种微调器或指示器来显示未解决的承诺。你可以使用一些变量来喜欢 loading:true 并在你的减速器中将它设置为 false 一旦解决。在渲染函数中使用相同的加载来显示微调器。

我用过redux devtool，我发现状态有所有数据，但是组件在第一次调用时无法接收到完整状态，直到didUpdate！！！！！！跨度>

【参考方案1】：

您的操作和状态更改都是异步的，立即执行console.log 将始终在这些更改实际完成之前返回。

您的状态正在更新，这就是当您在 mapStateToProps 中 console.log 时它起作用的原因。

我建议设置 redux-devtools，您将能够轻松跟踪您的操作/状态。

【讨论】：

是的，我做到了，我发现状态包含所有数据，但组件在第一次调用时无法接收到完整状态，直到 didUpdate !!!!!!

不确定您的意思...您的挂载组件发出 http 请求，完成渲染，然后一旦请求完成，它将使用从请求返回的数据更新您的组件。您可能希望在成功/错误时传递另一个变量，以让您的组件知道数据已返回并基于此呈现组件。

【参考方案2】：

希望代码对你有用

componentWillReceiveProps(nextProps)  
    console.log(nextProps.inter)