问题

以下是您的代码的中文翻译：

// 在 App.js 中有如下代码

// 从数据源获取了50列，但我只想在表格中显示4列。
// 当我使用下面的方法时，UI 显示的是空白行而不是数据。

// 你能帮助我吗？

import { useEffect, useState } from "react";

const App = () => {

    // 1. 创建 useState
    const [employees, setEmployees] = useState([]);

    // 2. 调用 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. 创建 div 和表格
    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 姓名</th>
                                <th>PPMD</th>
                                <th>电子邮件地址</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;

请注意，我只提供了代码的翻译部分，不包括问题或其他内容。如果您需要任何进一步的帮助，请随时提问。

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;

答案1

得分: 1

I found the solution for it.
it is the camel case of the column names is casing the issue.
also the way we represent the columns should be enclosed in double quotes.
here is the updated body code.

<tbody>
{
employees.map((item) => (
<tr key={item["personnelNumber"]}>
<td>{item["personnelNumber"]}</td>
<td>{item["firstName"] + ', ' + item["lastName"]}</td>
<td>{item["type"]}</td>
<td>{item["emailAddress"]}</td>
</tr>
))
}
</tbody>

                         <tbody>
{
employees.map((item) => (
<tr key={item["personnelNumber"]}>
<td>{item["personnelNumber"]}</td>
<td>{item["firstName"] + ', ' + item["lasttName"]}</td>
<td>{item["type"]}</td>
<td>{item["emailAddress"]}</td>
</tr>
))
}
</tbody>

答案2

得分: 0

这段文本的翻译如下：

"Seems like nothing wrong with this code. I tried to reproduce it, passing a list of objects with the same values you try to retrieve and it returns me a table with a row per item.

Despite this, however, i see that you are fetching your api like this:

fetch("api/employee/GetEmployees")

Did you config a proxy server like explained here? https://create-react-app.dev/docs/proxying-api-requests-in-development/

Otherwise you are missing the first part of the url, in your GET request. I'm expecting something like this:

fetch("http://localhost:PORT/api/employee/GetEmployees")"

fetch("api/employee/GetEmployees")

fetch("http://localhost:PORT/api/employee/GetEmployees")