时间戳

首页 > 解决方案 > 如何在 redux 操作完成后循环 redux 状态数据

reactjs - 如何在 redux 操作完成后循环 redux 状态数据

问题描述

我对 redux 操作有基本需求，但我不知道如何解决它。

这是我的风景；我有一个如下的 redux 操作，我想在我的 statefull 组件中完成 redux 操作后循环数据。

export const fetchServiceTypes = () => {
    return dispatch => {
        dispatch(fetchStStart());
        axios.get(GAMMA_CONSTANTS.LINK_SERVICETYPES)
            .then(res => {
                    dispatch(fetchStSuccess(res.data))
                })
            })
            .catch(err => {
                dispatch(fetchStFail(err))
            })
    }
}

在组件中，我在 componentWillMount 函数中调用 redux 动作，如下所示，但我认为，因为 redux 动作是异步工作的，我无法在 redux 状态完成后立即循环

componentWillMount() {
        if (this.props.serviceTypes.length === 0)
            this.props.onFetchServiceTypes();

        this.props.serviceType.forEach(x => {
            // TO DO
        })
    }

任何人如何解决这个问题？谢谢

标签： reactjsreact-redux

解决方案

componentDidMount仅在组件渲染之前触发一次，它不关心您的数据是否存在。您可以改为监听状态的变化。本文解释了新的生命周期方法是如何工作的。

旁注：如果您只想显示数据，您实际上可以直接在 html 中对其进行循环，并且只要状态更新，它就会更新。

推荐阅读