ComponentDidMount not firing in ReactJS - reactjs

Question

I have suddenly run into this problem in my app, the componentDidMount does not work when loading the page and I get typescript error due to the information not being loaded. It was working fine yesterday and the day before and now I have no idea what I did wrong. I have 4 api calls for the method GET, it's only for the GET method. Is there a way to make the component work again ? I have no idea why it behaves this way.
class adminView extends Component {
constructor(props) {
super(props);
this.state = {
Users: [],
Movies: [],
Comments: [],
Ratings: [],
message: null,
};
}
componentDidMount() {
this.reloadObjectiveList().then((r) => console.log("result" + r));
this.reloadUserList().then((r) => {
console.log("result" + r);
});
}
async reloadUserList() {
await UserApiService.fetchUsers().then((res) => {
console.log(res);
this.setState({
Users: res.data.result,
});
});
}
async reloadObjectiveList() {
await UserApiService.fetchUsers().then((res) => {
console.log(res);
this.setState({
Users: res.data.result,
});
});
await MovieApiService.fetchMovies().then((res) => {
this.setState({
Movies: res.data.result,
});
});
await CommentApiService.fetchComments().then((res) => {
console.log(res.data.result);
this.setState({
Comments: res.data.result,
});
});
await RatingApiService.fetchrating().then((res) => {
console.log(res.data.result);
this.setState({
Ratings: res.data.result,
});
});
}
deleteUsersComments(ObjectiveId) {
CommentApiService.deleteComment(ObjectiveId).then((res) => {
this.setState({ message: "Objective deleted successfully." });
this.setState({
Comments: this.state.Comments.filter(
(Objective) => Objective.username !== ObjectiveId
),
});
});
}
deleteUsersRatingss(ObjectiveId) {
RatingApiService.deleterating(ObjectiveId).then((res) => {
this.setState({ message: "Objective deleted successfully." });
this.setState({
Ratings: this.state.Ratings.filter(
(Objective) => Objective.username !== ObjectiveId
),
});
});
}
deleteMovies(ObjectiveId) {
MovieApiService.deleteTourist(ObjectiveId).then((res) => {
this.setState({ message: "Objective deleted successfully." });
this.setState({
Movies: this.state.Movies.filter(
(Objective) => Objective.imdb_id !== ObjectiveId
),
});
});
}
deleteUsers(ObjectiveId) {
UserApiService.deleteTourist(ObjectiveId).then((res) => {
this.setState({ message: "Objective deleted successfully." });
this.setState({
Movies: this.state.Movies.filter(
(Objective) => Objective.username !== ObjectiveId
),
});
});
}
render() {
const { details, loading } = this.props;
return (
<main className={styles.main}>
<Paper className={styles.paper}>
<Typography component="h1" variant="h5">
Hello ADMIN
</Typography>
<hr />
<Typography component="h1" variant="h5">
Users:
</Typography>
<div className="card-list">
{console.log(this.state.Users)}
{this.state.Users.map((item) => (
<CardUsers item={item} key={item.username} />
))}
</div>
<Table>
<TableHead>
<TableRow>
<TableCell>UserFirstName</TableCell>
<TableCell>UserLastName</TableCell>
<TableCell>UserEmail</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.Users.map((row) => (
<TableRow key={row.username}>
<TableCell align="center">{row.firstName}</TableCell>
<TableCell align="center">{row.lastName}</TableCell>
<TableCell align="center">{row.email}</TableCell>
<TableCell
align="center"
onClick={() => this.deleteUsers(row.username)}
>
<DeleteIcon />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<hr />
<Typography component="h1" variant="h5">
MOVIES
</Typography>
<hr />
<div className="card-list">
<Card item={this.state.Movies} />
</div>
<Typography component="h1" variant="h5">
Comments
</Typography>
<hr />
<hr />
<Table>
<TableHead>
<TableRow>
<TableCell>UserId</TableCell>
<TableCell>Comment</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.Comments.map((row) => (
<TableRow key={row.username}>
<TableCell align="center">{row.username}</TableCell>
<TableHead>
<TableCell>MovieID</TableCell>
<TableCell>Comment</TableCell>
</TableHead>
<TableBody>
{row.commentsList.map((row2) => (
<TableRow key={row2.id}>
<TableCell align="center">{row2.movieID}</TableCell>
<TableCell align="center">{row2.comment}</TableCell>
<TableCell
align="center"
onClick={() => this.deleteUsersComments(row2)}
>
<DeleteIcon />
</TableCell>
</TableRow>
))}
</TableBody>
</TableRow>
))}
</TableBody>
</Table>
<Typography component="h1" variant="h5">
Ratings
</Typography>
<hr />
<hr />
<Table>
<TableHead>
<TableRow>
<TableCell>UserId</TableCell>
<TableCell>Ratings</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.Ratings.map((row) => (
<TableRow key={row.username}>
<TableCell align="center">{row.username}</TableCell>
<TableHead>
<TableCell>MovieID</TableCell>
<TableCell>Rating</TableCell>
</TableHead>
<TableBody>
{row.ratingsList.map((row2) => (
<TableRow key={row2.id}>
<TableCell align="center">{row2.movieID}</TableCell>
<TableCell align="center">{row2.rating}</TableCell>
<TableCell
align="center"
onClick={() => this.deleteUsersRatingss(row2)}
>
<DeleteIcon />
</TableCell>
</TableRow>
))}
</TableBody>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
</main>
);
}
}
export default withRouter(withStyles(styles)(adminView));