如何在 React 应用中显示错误信息

API 调用可能会返回错误，了解如何处理这些错误。

在 React 中，我们经常需要使用外部 API。我们通常会从远程服务器获取数据，并将其显示在我们的应用程序中。

我们发现，Axioshttp是一个非常流行的用于向远程服务器发送请求的库。Axios 允许我们使用诸如` get()`、`post()` 等方法，这些方法会调用相应的 API方法来处理从 API 获取、发布、更新和删除数据的操作。get()post()http

放置 Axios 调用的一个好地方是componentDidMount()类组件的函数内部。
componentDidMount()当组件挂载到应用程序中时，React 会自动调用该函数。如果我们将 Axios 调用放在该函数内部，它将在适当的时机被调用，并且检索到的数据将添加到组件状态中，以便随时显示。

可能出现的 API 错误

并非所有对外部 API 的调用都能成功。事实上，远程服务器宕机或其他一些阻塞因素很可能导致我们无法访问所需数据。

在这种情况下，Axios 会返回错误。通常的做法是通过某种通知方式（例如在网页上显示错误消息）来告知用户发生了错误。

我们如何显示错误信息？

假设我们想在发生错误时在视图顶部显示一条错误消息。为了显示该消息，我们需要在组件中预先准备好该消息state。
让我们errorMessage在状态对象中添加一个属性，并将其值设为空字符串作为初始状态。

state = {
  items: [],
  errorMessage: ''
}

我们将 Axios 调用放在其中componentDidMount()，当调用成功时，我们将该值设置state为 API 响应中返回的值。

componentDidMount() {
  axios.get('http://localhost:3333/items')
    .then(response => this.setState({items: response.data}))
    .catch(err => { console.log(err) })
}

但是，当出现错误时，数据将无法在内部获取then()，而是catch()会调用该方法。API 返回的错误对象将被传递给该方法。
此时，我们需要做的是获取错误并errorMessage使用更新状态中的属性setState()。

下面的代码展示了这个操作。在 catch 分支中，我调用setState()了一个对象，该对象errorMessage会根据 API 返回的错误信息进行更新。

componentDidMount() {
  axios.get('http://localhost:3333/items')
    .then(response => this.setState({items: response.data}))
    .catch(err => { 
      this.setState({errorMessage: err.message});
    })
}

现在我们已经获取了错误信息，接下来只需要将其显示在
网页顶部。我们该如何操作呢？

显示错误

有很多方法可以实现，但我们喜欢使用条件语句来
显示错误。条件语句的基本内容是：

“如果状态中存在错误消息，则显示一个h3包含该errorMessage值的元素。但是，如果errorMessage状态为空，则不显示任何内容。”

要将此if 条件转换为代码，我们可以使用普通的if语句，但我们也可以使用更巧妙的方法。

我们使用快捷运算符&&。

运算&&符位于语句中间。

• 它首先评估语句的左侧。
• 如果左侧为真，则执行语句的右侧。
• 如果左侧不成立，&&则不对右侧进行任何操作。

下面的代码中，我们使用运算符来仅当状态的属性不为空时才&&显示错误消息：errorMessage

{ this.state.errorMessage &&
  <h3 className="error"> { this.state.errorMessage } </h3> }

意思是：如果this.state.errorMessage为真true，则显示错误信息。

记住，我们需要用括号把这个语句括起来，因为我们在里面编写的是 Javascript 代码JSX。

总之

• 对外部资源的 API 调用可能会卡住，并返回错误而不是预期数据。
• 在这种情况下，我们会捕获错误并将其显示在我们的应用程序中，以便用户知道出了问题。
• 我们使用条件语句显示错误，仅当错误存在时才显示错误。

如您所见，在我们的 React 应用程序中编写显示错误消息的代码非常容易。

我每天都会写一些关于网站开发的文章。如果您喜欢这篇文章，欢迎分享给您的朋友和同事。

订阅我的新闻简报，即可在您的收件箱中收到类似的文章。