在 API 调用中,我需要在各个字段中显示表中的数据。 我使用 Fetch 方法来显示数据,现在我只得到一个字段。 所以我需要显示表中的所有字段。
import React, { Component } from 'react';
import axios from "axios";
class App extends Component {
constructor(props) {
super(props)
this.state = {
data:[]
}
}
componentDidMount(){
fetch('http://localhost:3000/data')
.then(response => response.json())
.then(user => this.setState({data:user}))
}
render() {
return (
<div>
{this.state.data.map(use =>(
<h1 key={use.id} > {use.fname} </h1>
))}
<div className="row">
<div className="col-sm-8"><table className="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Tel</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
)
}
}
export default App;
最佳答案
也许是这样的。运行项目前请检查代码语法
render() {
return (
<div>
<div className="row">
<div className="col-sm-8"><table className="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Tel</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.data.map(use => (
<tr>
<td>{use.fname}</td>
<td>{use.lname}</td>
<td>{use.tel}</td>
<td>{use.add}</td>
<td>{use.city}</td>
<td>{use.state}</td>
<td>{use.zip}</td>
<td><button>edit</button></td>
<td><button>delete</button></td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
)
}
}
关于javascript - 在API调用中,我想在表中显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57833844/