Question

这是我遇到的问题。在React组件的渲染功能中，我有这个：

{first_name} {last_name}

我用它替换了它：

{first_name.toUpperCase()} {last_name.toUpperCase()}

我的应用程序无法再登录。我正在使用Axios与后端通信。 Axios基于承诺。在我做出改变之后。它显然已开始执行then API调用的catch和login块。当我在catch块中打印响应时。

function login(data, success, error) {
  axios.post('/login',
    JSON.stringify(data),
    {
      baseURL: config.apiUrl,
      headers: { 'Content-Type': 'application/json; charset=utf-8' }
    })
  .then((response) => success(response.data))
  .catch((response) => {
    console.log(response)
    error(response.status)})
}

我得到以下内容：

TypeError: Cannot read property 'toUpperCase' of undefined

上面的组件（它是一个简单的组件，只是显示页面上的道具的东西）和API调用代码之间绝对没有任何关系。

这不是我第一次在我的应用中碰到这个问题。有没有人曾经碰到这样的事情？我理解组件中的变量是未定义的，这就是错误出现的原因。我的问题是它如何在应用程序的另一端进入承诺的catch块。

Answer 1

事实证明，在JavaScript中，任何catch块都会捕获代码中任何位置抛出的任何错误。这是设计上的。

这是spec：

throw语句抛出用户定义的异常。执行当前函数将停止（抛出后的语句不会执行），控件将传递给第一个catch块调用堆栈。如果调用者函数之间不存在catch块，则程序将终止。

一种解决方法是在您引入的所有承诺上使用处理程序，这将console.log任何它不期望的内容，例如：

export function apiErrorHandler(handler) {
  return (error) => {
    if (error.stack) {
      throw error
    }
    if (error.status && error.data) {
      handler(error)
    } else {
      console.error('Unknown type of error thrown during service request or its handler:', error)
    }
  }
}

然后将其插入axios服务：

export function serviceGetContacts(success, error) {
  axios.get(`/contacts`, cfg())
    .then((response) => success(response.data))
    .catch(apiErrorHandler(error))
}

Answer 2

如果尚未定义名字或姓氏，您的更改将抛出TypeError。在登录过程完成之前，这很可能。

请尝试使用此代码：

{first_name && first_name.toUpperCase()} {last_name && last_name.toUpperCase()}

React组件抛出的错误，被一个无关的promise的catch块

2 个答案: