Javascript ReactJs:componentDidMount（）中的多个Axios调用

我想从我的API（Spring Boot）中提取数据到我的前端应用程序上，服务器端一切正常

现在我有了一个名为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（）{
设{articles}=this.state.articles；
返回(
{articles&&articles.map（article=>）}
小部件
)
}

not

let{articles}=this.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>
        )
    }

let { articles } = this.state;