javascript - 即使在 SUCCESS 之后，React 也会执行 PROMISE 的 CATCH 语句

Question

我通常是一名 Angular 开发人员，正在 React 中工作。如果这个问题看起来很简单，请原谅。

我有一个简单的 promise

    return axios(`team/${this.state.teamId}/player`, this.state)
        .then((response) => {
            console.log('formSubmit success');

            this.store.dispatch({
                type:       constants.PLAYER_UPDATE,
                payload:    response.data.user,
            });
            return false;

        })
        .catch((error) => {
            console.error('Error', error.response.data);
            this.setState({
                saveStatus: error.response.data.message
            });
            return Promise.reject(error)
        });

在网络选项卡中，我可以看到 URL 提取正常。 store.dispatch 也会在控制台中打印时被调用。

但同时它正在调用catch语句中的代码。 我的控制台输出是

formSubmit success                    Player.js:127
Store BEFORE | PLAYER_UPDATE          Store.js:76

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
at Player.js:135

为什么一切都成功了却在CATCH()之后呢？我什至在 this.store.dispatch

的末尾添加了 return 语句

请帮忙。

Answer 1

catch 函数将捕获 then 中出现的任何错误，如果您只想捕获 Promise 中的错误，您可能需要使用第二个回调在 then 函数中。你应该做这样的事情:

return axios.get(`endpoint`)
   .then(successCallback, errorCallback);

或者，就您而言，

return axios(`team/${this.state.teamId}/player`, this.state)
        .then((response) => {
            console.log('formSubmit success');

            this.store.dispatch({
                type:       constants.PLAYER_UPDATE,
                payload:    response.data.user,
            });
            return false;

        }, (error) => {
            console.error('Error', error.response.data);
            this.setState({
                saveStatus: error.response.data.message
            });
            return Promise.reject(error)
        });