React-native U.I 冻结并且在您从 axios 获得响应之前不响应答案

【问题标题】：React-native U.I Freezes and does not respond until you get response from axiosReact-native U.I 冻结并且在您从 axios 获得响应之前不响应
【发布时间】：2020-09-27 15:16:14
【问题描述】：

我有一个问题并且已经搜索了很多，但论坛上没有一个解决方案对我有用。我在屏幕上调用了 6 个 API（没有加载程序），底部有一个按钮可以将用户导航到另一个屏幕。

我在 componentDidMount() 中添加了编码，

 componentDidMount() {
            this.props.API1();
             this.props.API2();
         this.props.API3();
    }

但是，直到 i 所有三个 API 的响应都出现在 getderivedatatefromprops 中，用于导航到另一个屏幕的底部按钮不起作用。

this.props.API1() 是定义如下的 redux 动作

export const API1 = () => {
    return (dispatch) => {
        new Promise(async () => {

            const body = {
                method: 'GET',
                url: "get url of API",

            };
            axios(body)
                .then((response) => {
                    dispatch({
                        type: 'GETRESPONSE',
                        payload: { response: response.data, error: false },
                    });

                })
                .catch((error) => {

                        dispatch({
                            type: 'GETRESPONSE',
                            payload: { response: error?.response, error: true },
                        });
                });
        });
    };
};

【问题讨论】：

听起来你在主线程上调用同步调用。 API1、2、3 是什么样的？
这是 redux 操作。我已经修改了上面的代码以显示 redux 中如何提及操作

标签： reactjs react-native axios

【解决方案1】：

问题是您直接在 redux 操作中调用异步调用，这不是 redux 要做的。

如果您想这样做，您应该使用redux-sage 或redux-thunk。

另外，我没有在您的设计中看到为什么要进行 API1、2 和 3 redux 操作。操作旨在存储日期，而不是用于触发将存储数据的事件。所以你可以只调用 API 调用，然后在它们返回后将数据发送到 redux。

【讨论】：