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

在我的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,
};

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“reactstrap”导入{ListGroup、ListGroupItem、ListGroupItemHeading、Container}；
从“../../../API/MovieApi”导入{getMoviesInfo}；
进口{
MdBook，
MdVoiceChat，
MDR代表，
MdFlag，
MdMovie，
儿童保育，
}从“反应图标/md”；
从“react icons/fa”导入{FaAward、facalendarat、FaLanguage}；
进口{
GiSandsOfTime，
吉本坦潘，
董事会主席，
}从“反应图标/gi”；
从“../../../Components/Alert/Error”导入错误；
导出默认类MovieDetails扩展组件{
状态={
电影信息：[]，
错误：错误，
消息：“出现问题，请刷新您的页面或稍后返回”，
};
异步组件didmount（）{
等待这个.onFetchInfo（this.props.movieID）；
}
onFetchInfo=async movieID=>{
试一试{
const info=等待获取电影信息（电影ID）；
日志（“获取详细信息”，信息）；
这是我的国家({
电影资讯:，
});
返回[]；
}捕捉（错误）{
log（“onFetchInfo err:，err”）；
this.onShowErrorMessage（）；//这是我的错误
}
};
onShowErrorMessage=（）=>{
this.setState（{hasrerrors:true，load:false}）；
setTimeout（此.onClearMessage，5000）；
};
//movieInfo&&Object.keys（movieInfo）.length！==0？
/* : (
{hasErrors&&}
)*/
render（）{
const{movieInfo，hasrerrors，message}=this.state；
返回(
{hasErrors&&}
{movieInfo.Title}
{movieInfo.Plot}
{movieInfo.Genre}
{movieInfo.Director}
{movieInfo.Actors}
{movieInfo.Writer}
{movieInfo.Country}
{movieInfo.Awards}
{movieInfo.Year}
{movieInfo.Language}
{movieInfo.Runtime}
{movieInfo.totalSeasons}
{movieInfo.Rated}
);
}
}
MovieDetails.propTypes={
历史：PropTypes.any，
信息：PropTypes.shape({
标题：PropTypes.string，
演员：PropTypes.string，
奖励：PropTypes.string，
国家/地区：PropTypes.string，
类型：PropTypes.string，
语言：PropTypes.string，
Plot:PropTypes.string，
年份：PropTypes.string，
运行时：PropTypes.string，
totalSeasons:PropTypes.string，
额定值：PropTypes.string，
编写器：PropTypes.string，
控制器：PropTypes.string，
}),
movieID:PropTypes.string，
};

---

出现错误时，

catch（）

会向我显示

console.log（）

，但不会调用函数来显示错误消息，它会忽略该错误消息，并且无法找出原因

您可以有条件地使用JSX询问数组或对象是否为空-

console.log（“what ever You want”）或render（）

---

问候

如果我得到了您的问题，请更正catch块中的函数未运行的原因，因为try..catch同步工作。如果“计划”代码中发生异常，如setTimeout，请尝试..catch将无法捕获它：

try {

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

这是因为函数本身是在引擎已经离开try..catch构造之后执行的

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

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

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