当没有来自API的数据时，如何向用户显示错误消息

Question

在我的React应用程序中，当从API获取数据时出现问题时，我实现了一条错误消息。目标是显示一个错误消息，而不是告诉用户有问题的项目列表，然后回来。

不幸的是，我不能使它工作，因为它不是被称为showError()，也没有错误的控制台，所以我不知道是什么会导致问题不能使它正常工作。

我尝试这样做的代码如下：

import React, {Component} from "react";
import PropTypes from "prop-types";
import {ListGroup, ListGroupItem, ListGroupItemHeading, Container} from "reactstrap";
import {getMoviesInfo} from "../../../Apis/MovieApi";
import {
  MdBook,
  MdVoiceChat,
  MdRecentActors,
  MdFlag,
  MdMovie,
  MdChildCare,
} from "react-icons/md";
import {FaAward, FaCalendarAlt, FaLanguage} from "react-icons/fa";
import {
  GiSandsOfTime,
  GiFountainPen,
  GiDirectorChair,
} from "react-icons/gi";
import Error from "../../../Components/Alert/Error";

export default class MovieDetails extends Component {
  state = {
    movieInfo: [],
    hasErrors: false,
    message: "Something went wrong, please refresh yours page or come back later",
  };

  async componentDidMount() {
    await this.onFetchInfo(this.props.movieID);
  }

  onFetchInfo = async movieID => {
    try {
      const info = await getMoviesInfo(movieID);

      console.log("GETTING IN DETAIL", info);

      this.setState({
        movieInfo: info,
      });

      return [];
    } catch (err) {
      console.log("onFetchInfo err: ", err);
      this.onShowErrorMessage(); // here is my error
    }
  };

  onShowErrorMessage = () => {
    this.setState({hasErrors: true, loading: false});
    setTimeout(this.onClearMessage, 5000);
  };
  // movieInfo && Object.keys(movieInfo).length !== 0 ?
  /* : (
    <div>{hasErrors && <Error message={message} />}</div>
    )*/
  render() {
    const {movieInfo, hasErrors, message} = this.state;
    return (
      <>
      <Container>
      {hasErrors && <Error message={message} />}
      </Container>

        <ListGroup className="list-info">
          <ListGroupItemHeading>{movieInfo.Title}</ListGroupItemHeading>
          <ListGroupItem>
            <MdBook />
            <span>{movieInfo.Plot}</span>
          </ListGroupItem>
          <ListGroupItem>
            <MdVoiceChat />
            <span>{movieInfo.Genre}</span>
          </ListGroupItem>
          <ListGroupItem>
            <GiDirectorChair />
            <span>{movieInfo.Director}</span>
          </ListGroupItem>
          <ListGroupItem>
            <MdRecentActors />
            <span>{movieInfo.Actors}</span>
          </ListGroupItem>
          <ListGroupItem>
            <GiFountainPen />
            <span>{movieInfo.Writer}</span>
          </ListGroupItem>
          <ListGroupItem>
            <MdFlag />
            <span>{movieInfo.Country}</span>
          </ListGroupItem>
          <ListGroupItem>
            <FaAward />
            <span>{movieInfo.Awards}</span>
          </ListGroupItem>
          <ListGroupItem>
            <FaCalendarAlt />
            <span>{movieInfo.Year}</span>
          </ListGroupItem>
          <ListGroupItem>
            <FaLanguage />
            <span>{movieInfo.Language}</span>
          </ListGroupItem>
          <ListGroupItem>
            <GiSandsOfTime />
            <span>{movieInfo.Runtime}</span>
          </ListGroupItem>
          <ListGroupItem>
            <MdMovie />
            <span>{movieInfo.totalSeasons}</span>
          </ListGroupItem>
          <ListGroupItem>
            <MdChildCare />
            <span>{movieInfo.Rated}</span>
          </ListGroupItem>
        </ListGroup>
      </>
    );
  }
}

MovieDetails.propTypes = {
  history: PropTypes.any,
  info: PropTypes.shape({
    Title: PropTypes.string,
    Actors: PropTypes.string,
    Awards: PropTypes.string,
    Country: PropTypes.string,
    Genre: PropTypes.string,
    Language: PropTypes.string,
    Plot: PropTypes.string,
    Year: PropTypes.string,
    Runtime: PropTypes.string,
    totalSeasons: PropTypes.string,
    Rated: PropTypes.string,
    Writer: PropTypes.string,
    Director: PropTypes.string,
  }),
  movieID: PropTypes.string,
};

当出现错误catch()时，它会向我显示console.log()，但不是调用函数来显示错误消息，而是忽略了这一点，这就不知道原因了。

Answer 1

您可以使用JSX有条件地询问数组或对象是否为空- console.log("what ever you want") or render( <WhatEverYouWant /> )。

问候

Answer 2

如果我问到您的问题，请更正catch块中函数不运行的原因，因为try..catch同步工作。如果异常发生在“调度”代码中，比如在setTimeout中，那么try..catch将不会捕获它：

try {

} catch (e) {
  alert( "won't work" );
  setTimeout(function() {
    noSuchVariable; // script will die here
  }, 1000);
}

这是因为当引擎已经离开try..catch构造时，函数本身将在稍后执行。

若要捕获计划函数中的异常，try..catch必须位于该函数内：

setTimeout(function() {
  try {
    noSuchVariable; // try..catch handles the error!
  } catch {
    alert( "error is caught here!" );
  }
}, 1000);

您可以获得有关try..catch工作的详细信息。在这个博客上