我在App.js中有下面的代码
我从源代码中获得了50列,因为我想在一个表中只显示4列。当我接近下面的方法时,UI显示的是空行而不是数据。
你能帮忙吗?
import { useEffect, useState } from "react";
const App = () => {
//1 create useState
const [employees, setEmployees] = useState([]);
//2 call api
useEffect(() => {
fetch("api/employee/GetEmployees")
.then(response => { return response.json() })
.then(responseJson => {
//console.log(responseJson)
setEmployees(responseJson)
})
}, [])
console.log(employees)
//console.log(setEmployees)
//console.log(useState([]))
//3 create div and table
return (
<div className="container">
<h1>PPMDs</h1>
<div className="row">
<div className="col-sm-12">
<table className="table table-striped">
<thead>
<tr>
<th>PPMD ID</th>
<th>PPMD Name</th>
<th>PPMD</th>
<th>Email Address</th>
</tr>
</thead>
<tbody>
{
employees.map((item) => (
<tr key={item.PersonnelNumber}>
<td>{item.PersonnelNumber}</td>
<td>{item.FirstName}</td>
<td>{item.Type}</td>
<td>{item.EmailAddress}</td>
</tr>
))
}
</tbody>
</table>
</div>
</div>
</div>
)
}
export default App;
2条答案
按热度按时间mkshixfv1#
我找到解决办法了。列名的驼峰式大小写是问题的症结所在。我们表示列的方式也应该用双引号括起来。这是更新后的代码。
rm5edbpk2#
这段代码似乎没有什么问题。我尝试重现它,传递了一个对象列表,其中包含了您试图检索的值,它返回了一个表,每个表中有一行。
然而,尽管如此,我还是看到您是这样获取API的:
您是否配置了代理服务器,如此处所述?https://create-react-app.dev/docs/proxying-api-requests-in-development/
否则,您将在GET请求中丢失url的第一部分。我期待的是这样的: