In my React APP , I implemented an error message to occur when there are issues in getting the data from API.(在我的React APP中 ，当从API获取数据时出现问题时，我实现了一条错误消息。)
The goal is to show an error message instead of a list of the items which inform the user there is something wrong and to come back later.(目的是显示错误消息，而不是列表的项目，该列表通知用户有问题，然后稍后再返回。)
Unfortunate I cannot make it works as it is not called the showError() and also no error in the console so I'm clueless to understand what can cause the issue to not make it works as should be.(不幸的是，我无法使其正常运行，因为它没有被称为showError()并且在控制台中也没有错误，所以我不了解可能导致该问题的原因。)
The code I tried to do so is as follow:(我尝试这样做的代码如下：)
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,
};
When there is an error the catch() it is showing me the console.log() but is not calling the function to show the error message it is ignoring that and that cannot figure out why.(当发生错误时， catch()会向我显示console.log()但未调用该函数来显示错误消息，因此它忽略了这一点，因此无法弄清原因。)
ask by Jakub translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
