Javascript 完全获取数据后加载状态发生变化

我有ActionCreator从API获取数据，还有另一个ActionCreator用于加载状态，并希望在完全获取数据时更改加载状态

现在，我编写了以下代码，但工作不正常，在完全获取数据之前，加载状态更改为false

我的ActionCreator：

export const loadingStatus = (bool) => {
    return {
        type: Constants.LOADING_STATUS,
        isLoading: bool
    };
}
const allFlashCards = (action) => {
    return{
        type: Constants.ALL_CARD,
        ...action
    }
};

export const fetchAllFlashCards = () => {
    return (dispatch) => {
        dispatch(loadingStatus(true));
        return axios.post(API.DISPLAY_ALL_CARDS)
            .then((data)=>{
                console.warn(data);
                dispatch(allFlashCards(data));
                dispatch(loadingStatus(false));
            }).catch((error)=>{
                console.warn(error)
            });
    }
};

还有我的减速机：

const FlashCard = (state = [], action) => {
    switch (action.type) {
        case Constants.ADD_CARD:
            return {...state, data: action.data};
            break;
        case Constants.ALL_CARD:
            return {...state, data: action};
            break;
        default:
            return state;
    }
};

export const Loading = (status= false, action) => {
    switch (action.type) {
        case Constants.LOADING_STATUS:
            return action.isLoading;
            break;
        default:
            return status;
    }
}

在我的组件中：

componentDidMount() {
    this.props.fetchCards();
}

render() {
    return(
        <div>
            {this.props.loading ?
                    <Loading/> :
                    Object.keys(this.props.cards.data).map(this.renderCard)
                }
        </div>
    );
}

const mapStateToProps = (state) => ({
    cards: state.main,
    loading: state.loading
});
const mapDispatchToProps = (dispatch) => ({
    fetchCards: bindActionCreators(fetchAllFlashCards, dispatch)
});

在我的页面中，console中有一个错误，它是：

未捕获类型错误：无法读取未定义的属性“数据”

，如果将我的代码放入超时，修复了我的错误：/

---

我该怎么办？

您的默认状态错误：

const FlashCard = (state = [], action) => {
    switch (action.type) {
        case Constants.ADD_CARD:
            return {...state, data: action.data};
            break;
        case Constants.ALL_CARD:
            return {...state, data: action};
            break;
        default:
            return state;
    }
};

它应该是一个空对象

{}

，而不是一个空数组

[]

，因为您正在返回对象

此代码

export const fetchAllFlashCards = () => {
    return (dispatch) => {
        dispatch(loadingStatus(true));
        return axios.post(API.DISPLAY_ALL_CARDS)
            .then((data)=>{
                console.warn(data);
                dispatch(allFlashCards(data));
                dispatch(loadingStatus(false));
            }).catch((error)=>{
                console.warn(error)
            });
    }
};

看起来很好<在设置闪存卡之前，不应调用代码>加载状态（false）。你的还原者和动作创造者是同步的（他们应该是同步的）。所以，没有什么值得注意的

我看到您在

常量.ADD_CARD

action案例中使用了

action.data

，但在代码中，您没有使用该类型分派任何操作。你在别的地方做吗？也许这就是错误所在

编辑：

您正在使用的另一个位置是渲染器：

this.props.cards.data

。

state.main的值是多少？
您是如何创建rootReducer的？应该是这样的：

const rootReducer = combineReducers({
  main: FlashCard,
  loading: Loading,
});

您在那里使用的是
main
？或者可能是
卡
？
最后，我解决了我的问题：

在my actionCreator中，将fetchAllFlashCards方法更改为以下内容：

export const fetchAllFlashCards = () => {
    return (dispatch) => {
        dispatch(loadingStatus(true));
        return axios.post(API.DISPLAY_ALL_CARDS)
            .then(({data})=>{
                dispatch(allFlashCards(data));
                dispatch(loadingStatus(false));
            }).catch((error)=>{
                console.warn(error)
            });
    }
};

const FlashCard = (state = [], action) => {
    switch (action.type) {
        case Constants.ADD_CARD:
            return {...state, data: action.data};
            break;
        case Constants.ALL_CARD:
            return {...state, data: action.data};
            break;
        default:
            return state;
    }
};

在减速器中，将抽认卡减速器更改为：

export const fetchAllFlashCards = () => {
    return (dispatch) => {
        dispatch(loadingStatus(true));
        return axios.post(API.DISPLAY_ALL_CARDS)
            .then(({data})=>{
                dispatch(allFlashCards(data));
                dispatch(loadingStatus(false));
            }).catch((error)=>{
                console.warn(error)
            });
    }
};

const FlashCard = (state = [], action) => {
    switch (action.type) {
        case Constants.ADD_CARD:
            return {...state, data: action.data};
            break;
        case Constants.ALL_CARD:
            return {...state, data: action.data};
            break;
        default:
            return state;
    }
};

我现在不使用它，但在修复此错误后使用它。您的问题可能在rootReducer创建上。请检查编辑？我从react router Redux导入routerReducer，我想我应该在完全获取数据后错误加载。。。您在哪里声明
main
正在使用
FlashCard
减速机的结果？在我的问题中添加的state.main？combineReducer是什么