如何在react.js中获取Laravel资源API

Question

我最近刚学习反应js。现在，当我想要反应.js中的API结果时，我遇到了问题。

这是我的laravel资源API

{
   "data": {
     "project_id": 2,
     "project_name": "Starbucks (Demo) Residences",
     "created_by": "Kwang",
     "developer": {
     "developer_name": "Marina (Demo) Property Sdn. Bhd.",
     "created_by": "Kwang",
     "total": 45
   },
 "total_phase": 4,
 "phase_name": []

}

现在，我想使用Axios在react js中请求此API。我将状态设置为single_project。然后，我获取API网址以获取数据。数据可以在我的console.log中显示。

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class ProjectInfo extends Component {
  constructor(props){
    super(props);
    this.state = {single_project:[]}
  }

  componentDidMount(){
    axios.get('http://sale.test/api/project/2')
    .then(res => {
      let single_project = res.data;
      this.setState({single_project});
      console.log(single_project); //I get the data here
    })
  }

  render() {
    return (
     <div className="developer-panel">
       {this.state.single_project.project_name} //I cannot get this
     </div>
    );
  }
}

export default ProjectInfo;

我可以成功地从API控制数据。但是，我无法使用{this.state.single_project.project_name}渲染结果
有人请帮帮我!!
适用任何建议或解决方案。