javascript - 当没有数据来自API时如何在React中向用户显示错误消息

Question

在我的React App 中，我实现了一条错误消息，当从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 /> )
问候