reactjs - 在异步等待中向用户显示错误消息

Question

我有下面的代码来从 azure 获取照片。当我收到没有可用图像的错误消息时，我捕获了错误并将error.log记录下来。但是，这看起来很丑。有什么更好的显示方式？我不能；因此不能重定向到404，因为此错误不会阻止该应用程序正常工作

fetchImage = async(token) => {
        try {
          const response = await axios
            .get(`https://graph.microsoft.com/v1.0/users/${this.props.authentication._user.userName}/photo/$value`,{
              responseType: 'arraybuffer',
              headers: {'Authorization': 'Bearer ' + token}
            })

            this.setState({
              image: new Buffer(response.data).toString('base64')
            })
        }
        catch (error) {
          console.error(error)
        }
      }

Answer 1

您可以在状态上创建新的 Prop ，例如isError

然后您可以控制该 Prop 的错误
(isError)？ :“接收到的错误”:“保持继续”

state = {
  isError: false
};

fetchImage = async token => {
  try {
    const response = await axios.get(
      `https://graph.microsoft.com/v1.0/users/${
        this.props.authentication._user.userName
      }/photo/$value`,
      {
        responseType: "arraybuffer",
        headers: { Authorization: "Bearer " + token }
      }
    );

    this.setState({
      image: new Buffer(response.data).toString("base64")
    });
  } catch (error) {
    this.setState({
      isError: true
    });
    console.error(error);
  }
};

如果您需要保存错误消息，可以执行此操作

state = {
  error: ""
};

in the catch block 

catch (error) {
  this.setState({
    error: error.message
  });
}

and then check (this.state.error.length) ? "show error" : 'continue working'