在React.js应用中使用AxiosMobx进行无休止的Http 404错误响应循环。

Question

我正在开发一个React.js应用，使用Axios进行HTTP处理，使用MobX进行状态管理。我得到了这个错误，我发送了一个测试无效的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获取'活动'的第一行会抛出一个Http 404错误，发送到捕获块，在那里 "Errored -> error block "记录在控制台。

它应该到此为止，但是在 "Errored -> error block "日志之后，不知为什么它打印了 "Step 1: get activity from local activityRegistry"，这意味着整个方法又从头开始运行了。然后继续重复。

这是Axios与API通信的代码，但我找不到任何会导致这种行为的东西。

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 数组，并在每次渲染时被调用。