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

我最近才知道。现在，当我想在react.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。我将该州设置为单一项目。然后，我获取API url以获取数据。数据可以显示在my 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;

import React，{Component}来自'React'；
从“axios”导入axios；
从'react router dom'导入{Link}；
类ProjectInfo扩展组件{
建造师（道具）{
超级（道具）；
this.state={single_项目：[]}
}
componentDidMount（）{
axios.get（）http://sale.test/api/project/2')
。然后（res=>{
设单_项目=res.data；
this.setState（{single_project}）；
console.log（single_project）；//我在这里获取数据
})
}
render（）{
返回(
{this.state.single\u project.project\u name}//我无法获取此信息
);
}
}
导出默认项目信息；

我可以成功地从API中控制数据。但是，我无法使用

{this.state.single\u project.project\u name}

任何人都请帮帮我！！

---

请告知任何建议或解决方案。

谢谢，但您的文章与我的问题人无关。当您在Component中console.log data安装数据类型时，它是对象还是字符串化？？？@pritesh感谢您的回复人，它返回为object@pritesh，我不确定是不是API前面的“数据”，因为我使用laravel资源构建了这个API。