Javascript React-Redux在呈现组件之前等待获取结果

我有一些react redux项目。 我有一些组件，我不想从api中列出一些数据。 只需从componentDidMount方法中的组件中分派操作，该方法获取数据

当我刷新页面时，我使console.log成为我的redux状态

组件呈现良好，但当我查看控制台时，会看到my console.log show my state empty然后show my state normally。。在这个过程中，我的组件给了我一个错误，我不想在页面上显示的数据是未定义的

这是因为fetch方法是异步工作的，所以我的理解是这样的，但当我的redux状态将从api获取数据，然后组件将被呈现时，需要做什么呢

这是我的行动：

export const FETCH_DATA_START = 'FETCH_DATA_START'
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
export const FETCH_DATA_FAILED = 'FETCH_DATA_FAILED'

export const getData = () => {
    return (dispatch) => {
        dispatch({
            type: FETCH_DATA_START
        })
        fetch("http://api.com", {
                credentials: "include",
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then((res) => {
                dispatch({
                    type: FETCH_DATA_SUCCESS,
                    payload: res
                })
            })
            .catch((err) => {
                console.log(err)
                dispatch({
                    type: FETCH_DATA_FAILED,
                    payload: 'error'
                })
            })
    }
}

import { FETCH_DATA_START, FETCH_DATA_SUCCESS, FETCH_DATA_FAILED } from 'store/actions/getData'

let initialState = []

export default (state = initialState, action) => {
    switch (action.type) {
        case FETCH_DATA_START:
            return [...state]
        case FETCH_DATA_SUCCESS:
            return [...state, ...action.payload]    
        case FETCH_DATA_FAILED: 
            return [state]
        default:
            return state
    }
}

这是我的减速机：

export const FETCH_DATA_START = 'FETCH_DATA_START'
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS'
export const FETCH_DATA_FAILED = 'FETCH_DATA_FAILED'

export const getData = () => {
    return (dispatch) => {
        dispatch({
            type: FETCH_DATA_START
        })
        fetch("http://api.com", {
                credentials: "include",
                method: "POST",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then((res) => {
                dispatch({
                    type: FETCH_DATA_SUCCESS,
                    payload: res
                })
            })
            .catch((err) => {
                console.log(err)
                dispatch({
                    type: FETCH_DATA_FAILED,
                    payload: 'error'
                })
            })
    }
}

import { FETCH_DATA_START, FETCH_DATA_SUCCESS, FETCH_DATA_FAILED } from 'store/actions/getData'

let initialState = []

export default (state = initialState, action) => {
    switch (action.type) {
        case FETCH_DATA_START:
            return [...state]
        case FETCH_DATA_SUCCESS:
            return [...state, ...action.payload]    
        case FETCH_DATA_FAILED: 
            return [state]
        default:
            return state
    }
}

在我的组件中：

import React, {Component} from 'react'
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {getData} from 'store/actions/getData'


class Ops extends Component {

    componentDidMount() {
        this.props.getData()
    }
    render() {
       console.log(this.props.dataOps)
       return(
           <div></div>
         )
    }
}


const mapStateToProps = state => ({dataOps: state.dataOps})

function mapDispatchToProps(dispatch) {
    return {
        getData: bindActionCreators(getData, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Ops)

import React，{Component}来自“React”
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}
从“store/actions/getData”导入{getData}
类Ops扩展组件{
componentDidMount（）{
this.props.getData（）
}
render（）{
console.log（this.props.dataOps）
返回(
)
}
}
常量mapStateToProps=state=>（{dataOps:state.dataOps}）
功能图DispatchToprops（调度）{
返回{
getData:bindActionCreators（getData，dispatch）
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（Ops）

选项1

使用前检查减速器状态

选择2

 async componentDidMount(){
   //set loader true
   await this.props.getData;
   //set loader false
 }

选择1

使用前检查减速器状态

选择2

 async componentDidMount(){
   //set loader true
   await this.props.getData;
   //set loader false
 }

---

你也可以发布你的组件吗？您确定您的组件没有更新吗？减速机和取货机看起来不错。您描述它的方式听起来像是控制台日志和未定义的错误，因为这些脚本是在异步调用完成之前触发的。@Mkk我理解。是的，这是因为异步，但如何防止它？我用组件更新了我的问题你也可以发布你的组件吗？您确定您的组件没有更新吗？减速机和取货机看起来不错。您描述它的方式听起来像是控制台日志和未定义的错误，因为这些脚本是在异步调用完成之前触发的。@Mkk我理解。是的，这是因为异步，但如何防止它？我用组件更新了我的问题