Я хочу извлечь данные из моего API (Spring Boot) в мое интерфейсное приложение на React, все отлично работает на стороне сервера.
Теперь у меня есть компонент с именем HomePage, где я хочу получить массив статей из моего API. Проблема в том, что я получаю несколько ответов, из которых первый и второй являются пустыми массивами, а третий - обычным массивом с необходимыми данными.
constructor(props){
super(props);
this.state = {
articles: []
}
}
componentDidMount(){
this.loadArticles();
}
loadArticles(){
articleService.fetchArticles().then((response) => {
this.setState({
articles: response.data
})
});
}
При проверке с расширением React DevTool Я вижу, что состояние успешно изменилось, и все же мой компонент не рендерится повторно. (Если я не проверяю, являются ли статьи пустыми, я получаю сообщение об ошибке, в котором говорится, что .map () не определено, что означает, что при визуализации компонента он был заполнен state.articles с первоначальным ответом, который всегда пуст).
render() {
let { articles } = this.state.articles;
return (
<div className="container">
<div className="row">
<div className="col-md-9">
{articles && articles.map(article => <Article key={article.id} article={article}/>)}
</div>
<div className="col-md-3">
widgets
</div>
</div>
</div>
)
}