import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router'
class Beacons extends Component {
constructor()
{
super();
console.log("componentDidMount running");
this.state = {
data:[
{name:"Nikko Laus1" , beacon:"" ,button:"Edit Beacon"},
{name:"Sam Collins", beacon:"",button:"Edit Beacon"},
{name:"Carl Smith Wesson", beacon:"",button:"Edit Beacon"},
{name:"Peter Austin", beacon:"",button:"Edit Beacon"},
{name:"Peter Austin", beacon:"",button:"Edit Beacon"},
{name:"Tini Titus", beacon:"",button:"Edit Beacon"},
{name:"Sarra Cams", beacon:"",button:"Edit Beacon"}
]
};
fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/beacons",{
headers: {
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
'Content-Type': 'application/json'
},
method : 'GET'
})
.then(function(response) {
console.log("response")
console.log(response)
return response.json();
})
.then(function(data) {
console.log("data")
console.log(data)
})
.catch(function(error){
console.log("error")
console.log(error)
});
}
componentDidMount(){
console.log("hello");
}
static contextTypes = {
router: React.PropTypes.object.isRequired
}
handleSubmit(event){
this.context.router.push('/components/NewBeacon');
}
render() {
let rows = this.state.data.map(person =>
{
return <TableRow key={person.id} data={person}/>
});
return (<div><div className="row float-right">
<button className="nav-link btn btn-block btn-success" onClick={this.handleSubmit.bind(this)} >
Add a new Beacon </button>
</div><br/><br/>
<div className="animated fadeIn">
<br /><div className="card" style={{ width: 75 + '%' }}>
<div className="card-header">
<i className="fa fa-align-justify"></i> Manage Information
</div>
<div className="card-block">
<table className="table table-hover table-outline mb-0 hidden-sm-down">
<thead className="thead-default">
<tr>
<th className="text-center">Name</th>
<th className="text-center">Beacon</th>
<th className="text-center">Edit Beacon</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table></div>
</div>
</div>
</div>
);
}
}
class TableRow extends React.Component
{
constructor()
{
super();
}
render()
{
return (<tr>
<td className="text-center">{this.props.data.name}</td>
<td className="text-center">{this.props.data.beacon}</td>
<td className="text-center"><center><Link to={'/Components/EditBeacon'} style= {{ width: 40 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">
{this.props.data.button}</Link></center></td>
</tr>
);
}
}
ReactDOM.render(
<Beacons />,
document.getElementById('root')
);
export default Beacons;
我在此页上制作了一个表格 现在我想访问 api,从该 api 获取的结果将显示在此页面上制作的表格中 使用 get 方法调用 Fetch api 来调用 API,并以表格形式显示其结果
最佳答案
下面是一个关于如何使用 fetch 来实现此目的的简单示例:
fetch(`https://www.reddit.com/r/dogs.json`)
.then(response => {
return response.json();
})
.then(json => {
// doSomeThing(json.someProperty)
// this.setState({jsonData: json});
})
.catch((error) => {
// AHHHH! An Error!
});
您必须根据您拥有的数据类型(.json()、.blob() 等)从获取响应中获取数据。 Using Fetch
在第二个 .then()
中,您实际上可以设置状态,将有效负载分派(dispatch)到您的存储,或者以组件接收它的某种方式处理它。在上面的示例中,您将渲染从 jsonData 中获得的任何内容。
关于reactjs - 如何使用 fetch get 方法从服务器检索数据并将其显示在表格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42830817/