使用Axios/Mobx的React.js应用程序中的无限HTTP404错误响应循环

Question

我正在开发一个使用Axios进行超文本传输协议处理和MobX进行状态管理的React.js应用程序。我收到了这个错误，其中我发送了一个测试无效的HTTP响应，这将导致404错误。但我得到的是一个404错误的循环，不断重复，这是控制台的外观：

​

​

下面是产生此错误的方法。我创建了一个“调试模式”版本：

    // for testing
    @action loadActivityDos = async (id: string) => {
        let activity = this.getActivity(id);
        console.log("Step 1: get activity from local activityRegistry");
        if (activity) {
            this.activity = activity;
            console.log("Step 2-1: set local activity to scoped activity");
        } else {
            this.loadingInitial = true;
            try {
                activity = await agent.Activities.details(id);
                runInAction('getting activity', () => {
                    this.activity = activity;
                    this.loadingInitial = false;
                })
                console.log("Step 2-2: get activity from API in the try block");
            } catch(error) {
                runInAction('get activity error', () => {
                    this.loadingInitial = false;
                })
                console.log("Errored -> error block");
            }
        }

首先，该方法在从本地数组中获取“活动”失败后命中try块。等待来自API的“activity”的第一行抛出一个Http 404错误，发送到catch块，其中"Errored -> error block“在控制台中记录。

它应该在这里结束，但是在"Errored -> error block“日志之后，由于未知的原因，它打印了”Step1: get activity from local activityRegistry"，这意味着整个方法将从头开始运行。然后它会继续自我重复。

下面是与API通信的Axios代码，但我找不到任何可能导致此行为的代码：

axios.defaults.baseURL = 'https://localhost:5001/api';

const responseBody = (response: AxiosResponse) => response.data;

const sleep = (ms: number) => (response: AxiosResponse) => 
    new Promise<AxiosResponse>(resolve => setTimeout(() => resolve(response), ms));

const requests = {
    get: (url: string) => axios.get(url).then(responseBody),
}

const Activities = {
    list: ():Promise<IActivity[]> => requests.get('/activities'),
    details: (id: string) => requests.get(`/activities/${id}`),
}

我忘记了为什么会发生这种循环，如果有人能给我一些启发，我将非常感激。我很乐意提供任何其他细节。

Answer 1

从哪里调用loadActivityDos？你有没有一个reaction来调用它，或者你可能使用useEffect

也许你有一个无穷无尽的reaction循环，它会对你改变的某些标志做出反应

或者可能useEffect最后没有deps数组，所以每次渲染时都会调用它。