setState 沒有在 axios POST 請求錯誤處理程序中觸發

Question

我正在嘗試為負責注冊用戶的 React Component SignupForm.js設置錯誤處理程序。 特別是，我重點實現的處理程序涉及處理已在使用的提供的用戶電子郵件的實例。

這是我的 POST 請求：

await axios
            .post("http://localhost:8000/signup", {
                name,
                email,
                password,
                tokenValue,
            })
            .catch((error) => {
                console.log("ERROR --> ", error);
                //this.displayError(error);
                this.setState(
                    {
                        err: true,
                        errcode: error.response.data.errcode,
                        errtext: error.response.data.errText,
                    },
                    () => {
                        console.log("setstate done");
                    }
                );
            })
            .then((res) => {
                if (res !== undefined) {
                    console.log(res.data);
                }
            });

下圖顯示了 Chrome 開發工具的輸出：

如您所見， console.log("Error --> ", error); 確實在開火。 但是， this.setState()似乎沒有觸發。 有一些跡象表明了這一點。

1. 使用 React DevTools 插件觀察到的SignupForm狀態保持不變。
2. 我在render()函數的最頂部包含了一個打印語句，如下所示：

render() {
        console.log(this.state);
        return (
            <div className="form-container">
                <form
                    name="sign-up"
                    method="post"
                    className="form-sign-up"

盡管setState()調用應該觸發重新渲染的概念，但組件狀態在錯誤被捕獲后永遠不會打印到控制台。

3. console.log("setstate done"); 永遠不會觸發，因為 DevTools 控制台中也缺少輸出。

我嘗試過的事情

1. 我嘗試將setState()調用封裝到錯誤處理函數displayError(e)中，如下所示：

displayError = (e) => {
        this.setState(() => ({
            err: true,
            errcode: e.response.data.errcode,
            errtext: e.response.data.errText,
        }));
    };

這似乎沒有任何效果。 在調用this.displayError = this.displayError.bind(this);之后，我還嘗試調用displayError(e) 在組件構造函數中，同樣沒有效果。

在這一點上，我不確定還能嘗試什么。

Answer 1

弄清楚了。 最初，我很想將我的代碼發布到網上供大家查看。 在稍微了解了 CodeSandbox 之后，我認為我需要學習 Docker，這樣我就可以編寫前端和后端，同時在某個地方在線托管一個免費的 MySQL 數據庫。

這讓我很沮喪，因為我知道 Docker 可能需要一些時間來學習，而且我想以盡可能少的麻煩來深入了解它。

我接受了@S.Marx 所說的並進行了調查。 在進一步考慮他們所說的話之后，我也覺得奇怪，我會把我的catch塊放在我的then塊之前。

果然，交換這兩個塊完全解決了這個問題。 現在正在更改狀態，如下所示：

await axios
            .post("http://localhost:8000/signup", {
                name,
                email,
                password,
                tokenValue,
            })
            .then((res) => {
                if (res !== undefined) {
                    console.log(res.data);
                    console.log("Signup Successful!!");
                }
            })
            .catch((error) => {
                console.log("Signup Error! --> ", error);
                //this.displayError(error);
                this.setState(
                    {
                        err: true,
                        errcode: error.response.data.errcode,
                        errtext: error.response.data.errText,
                    },
                    () => {
                        console.log("setstate done");
                    }
                );
            });

當然，現在應該在屏幕上呈現狀態更改的組件沒有顯示錯誤消息。 然而，這是一個單獨的問題。