Reactjs 为什么API中的Json没有呈现在表上

所以我今晚想玩ReactTable，从API获取信息并显示在表上。 这是PHP精心编制的RESTAPIhttps://librational-`talker.000webhostapp.com/peopleBase/employee_informationAPI.php，现在我希望它从componentDidmount（）加载数据，它应该填充表格并显示表格上的所有数据

我把这当作一张空桌子

当我运行API时，我得到了这个

我想知道为什么它不在桌子里面

我的代码是这样的

import React , { Component } from 'react';
import axios from 'axios'
import ReactTable from "react-table"; 
import 'react-table/react-table.css'

export default class HomePage extends Component {

    constructor(props){
        super(props)
        this.state = {
          users: [],
          loading:true
        }
      }

      async getUsersData(){
        const res = await axios.get('https://librational-talker.000webhostapp.com/peopleBase/employee_informationAPI.php')
        console.log(res.data)
        this.setState({loading:false, users: res.data})
      }
      componentDidMount(){
        this.getUsersData()
      }

    render() {

        const columns = [{  
            Header: 'ID',  
            accessor: 'ID',
           }
           ,{  
            Header: 'Firstname',  
            accessor: 'Firstname' ,
            }
           
           ,{  
           Header: 'Lastname',  
           accessor: 'Lastname' ,
           }
           ,{  
           Header: 'Gender',  
           accessor: 'Gender',
           },
           {  
            Header: 'DOB',  
            accessor: 'Date_of_birth',
            },
            {  
              Header: 'Email',  
              accessor: 'Email',
              },
              {  
            Header: 'Telephone',  
             accessor: 'Telephone',
            },
            {
                Header: 'NationalIDNumber',  
                accessor: 'NationalIDNumber',
            },
            {
                Header: 'PassportNumber',  
                accessor: 'PassportNumber',
            },
            {
                Header: 'Salary',  
                accessor: 'Salary',
            },
        ]

        return (
            <ReactTable  
            data={this.state.users}  
            columns={columns}  
         />
           );
    }

}

import React，{Component}来自'React'；
从“axios”导入axios
从“反应表”导入反应表；
导入“react table/react table.css”
导出默认类扩展组件{
建造师（道具）{
超级（道具）
此.state={
用户：[]，
加载：正确
}
}
异步getUsersData（）{
const res=等待axios.get（'https://librational-talker.000webhostapp.com/peopleBase/employee_informationAPI.php')
console.log（res.data）
this.setState（{loading:false，users:res.data}）
}
componentDidMount（）{
这是getUsersData（）
}
render（）{
常量列=[{
标题：“ID”，
访问者：“ID”，
}
,{  
标题：“Firstname”，
访问者：“名字”，
}
,{  
标题：“Lastname”，
访问者：“Lastname”，
}
,{  
标题：“性别”，
访问者：'性别'，
},
{  
标题：“DOB”，
访问者：“出生日期”，
},
{  
标题：“电子邮件”，
访问者：“电子邮件”，
},
{  
标题：“电话”，
访问者：“电话”，
},
{
标题：“国家编号”，
访问器：“NationaldNumber”，
},
{
标题：“PassportNumber”，
访问者：“PassportNumber”，
},
{
标题：“工资”，
访问者：“工资”，
},
]
返回(
);
}
}

这里是否有我似乎遗漏的东西或做得不正确？求你了，我需要帮助。这是很新的

编辑

交叉检查，我看到了这个

因此，我已经从网络主机启用了CORS。但它仍然没有提取数据并在表上显示信息

---

我该怎么做呢？

我相信这是因为你的终结点`https://librational-talker.000webhostapp.com/peopleBase/employee_informationAPI.php'您正在尝试将中的PHP文件作为对象读取。本质上，这是PHP的结果

您需要为API路径创建一个常量，并处理数据以正确格式化它。像这样的

const API_PATH = https://librational-talker.000webhostapp.com/peopleBase/employee_informationAPI.php


 getUsersData = e => {
  e.preventDefault();
  axios({
    method: 'users',
    url: `${API_PATH}`,
    headers: { 'content-type': 'application/json' },
    data: this.state
  })
    .then(result => {
       this.setState({ loading: false, users: res.data });
    })
    .catch(error => this.setState({ error: error.message }));
};

---

可能需要一些调整，但希望这能让您朝着正确的方向前进？

因此，我采取了一些步骤让它工作起来。希望有一天这会对新手有所帮助

1.）我登录到000webhost，在那里托管了API，并在.htaccess文件中添加了该API

Header set Access-Control-Allow-Origin "*"

2.）然后再次检查我的代码，我发现我没有添加正确的数据源。这是命中注定的

return (
    <ReactTable  
    data={this.state.users}  
    columns={columns}  
 />
   );

返回(
);

而不是

return (
    <ReactTable  
    data={this.state.data}  
    columns={columns}  
 />
   ); 

返回(
); 

一如早前所说。事实证明，实现跨来源资源共享是主要的挑战。我很高兴我能解决它

---

谢谢大家。

谢谢检查，我在CORS上看到了错误。请参阅编辑您最有可能需要在路径输入标题中添加某些内容：{“访问控制允许来源”：“*”}请解释一下，我在哪里添加访问标题？我已将其添加到我使用的Webhosting中。它在浏览器的控制台中返回。但是在代码中返回是否定的。我在reactTable中没有看到它。在这里，我把它放在一起，这不需要使用lifecycle方法的headers响应。