Question

大家晚上好！

我是React和Redux的初学者，所以如果这听起来很愚蠢，请耐心等待。

我正在尝试使用axios执行API调用，这些axios的响应数据需要打印到模态上。

所以，如果我在同一个组件的函数中定义了axios.get，它会得到响应并将它存储到一个状态，然后我在模态中显示状态，一切正常。

但如果我使用动作和减速器做同样的事情，我第一次点击它时会得到一个空的模态。

没有操作和减少器

 compile 'com.google.firebase:firebase-core:9.2.0' 
 compile 'com.google.firebase:firebase-messaging:9.2.0'
compile 'com.google.android.gms:play-services-location:9.2.0'
compile 'com.google.android.gms:play-services-places:9.2.0'

使用操作和缩减器

行动创作者

handleImageClick() {
    axios.get(`http://demoapiwebsite`)
        .then(response => {
            response = JSON.stringify(response.data,null,"\t");
            this.setState({ imageDetails: response })  //Modal applies the data from the state imageDetails.
            this.setState({ selectedReceiptDetails: true }); // Toggles the modal.
        });
}

减速器

export function getImageDetails() {
    return function (dispatch) {
        axios.get(`http://demoapiwebsite`)
            .then(response => {
                dispatch({
                    type: IMAGE_DETAILS,
                    payload: response.data
                });
                console.log(response.data);
            })
    }
}

COMPONENT

import {
    IMAGE_DETAILS,
} from '../actions/types';

export default function (state = {imageDetails:''}, action) {
    switch (action.type) {
        case (IMAGE_DETAILS):
            return { ...state, imageDetails: action.payload };
        default:
            return state;
    }
}

请帮助！

Answer 1

如果您正在处理异步操作，那么在数据可用于redux store之前，您必须拥有一些Loading代码块。关于组件的重要一点是，在调用fetch操作之后和异步数据到达之前，它总是以初始状态/一次呈现。

componentWillReceiveProps(nextProps){
 //change the loading state to false if next props is data.
}

React - 单击时，模态加载的速度比动作中定义的API响应快，从而产生空模式

1 个答案: