如何在React的HTML表格中展示指定列？现有代码显示空白行求解决

先确认API返回的数据结构 #

打开浏览器控制台，查看你代码里console.log(employees)的输出：

• 如果输出是空数组，说明API请求没拿到数据，或者数据没正确存入state
• 如果输出是数组，但每个item里没有你使用的PersonnelNumber、FirstName等字段，要么是字段名拼写错误，要么是API返回的数据嵌套在某个属性里（比如responseJson.data）

给fetch添加错误处理逻辑 #

你当前的代码没处理请求失败的情况，一旦API报错，employees会一直是空数组，自然显示空白行。修改fetch部分代码：

useEffect(() => {
    fetch("api/employee/GetEmployees")
        .then(response => {
            // 先校验请求是否成功
            if (!response.ok) {
                throw new Error('请求失败');
            }
            return response.json()
        })
        .then(responseJson => {
            // 打印返回数据，确认结构是否符合预期
            console.log('API返回数据:', responseJson);
            // 如果数据嵌套在data属性里，就改成responseJson.data
            setEmployees(responseJson);
        })
        .catch(error => {
            console.error('获取数据出错:', error);
        })
}, [])

检查字段名大小写匹配 #

React中对象属性名区分大小写，比如API返回的是personnelNumber（小写p），你代码里写item.PersonnelNumber就会取不到值，导致单元格空白。对照控制台的输出，确保字段名完全一致。

处理非数组返回的极端情况 #

如果API返回的是单个对象或其他非数组类型，map方法会报错，也会导致表格空白。可以添加类型判断：

{Array.isArray(employees) ? (
    employees.map((item) => (
        <tr key={item.PersonnelNumber}>
            <td>{item.PersonnelNumber}</td>
            <td>{item.FirstName}</td>
            <td>{item.Type}</td>
            <td>{item.EmailAddress}</td>
        </tr>
    ))
) : (
    <tr><td colSpan="4">无数据</td></tr>
)}

内容的提问来源于stack exchange，提问作者Sukumar