如何在React.js中展示Node.js API返回的对象数组数据

核心实现代码 #

import { useState, useEffect } from 'react';

function DeviceTable() {
  const [devices, setDevices] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 调用Node.js后端API
    fetch('/api/devices') // 替换为你的实际API路径
      .then(res => {
        if (!res.ok) throw new Error('数据请求失败');
        return res.json();
      })
      .then(rawData => {
        // 提取所需字段，生成新数组
        const processedDevices = rawData.map(device => ({
          name: device.name,
          serial: device.serial,
          status: device.status
        }));
        setDevices(processedDevices);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  // 状态分支处理
  if (loading) return <div>加载设备数据中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <table border="1" cellPadding="8" cellSpacing="0">
      <thead>
        <tr>
          <th>设备名称</th>
          <th>序列号</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        {/* 动态渲染每一行 */}
        {devices.map(device => (
          <tr key={device.serial}> {/* 用唯一序列号作为key，比索引更可靠 */}
            <td>{device.name}</td>
            <td>{device.serial}</td>
            <td>{device.status}</td>
          </tr>
        ))}
        {/* 空数据提示 */}
        {devices.length === 0 && (
          <tr>
            <td colSpan="3">暂无设备信息</td>
          </tr>
        )}
      </tbody>
    </table>
  );
}

export default DeviceTable;

关键注意事项 #

• 字段校验：确认API返回的每个对象都包含name、serial、status字段，注意大小写匹配（比如Name和name会导致渲染空值）。
• Key值规范：必须给列表项设置唯一key，优先使用设备的serial（天然唯一标识），避免用索引作为key（数据顺序变化时会引发渲染异常）。
• 跨域处理：如果前端和Node.js API不在同一域名下，需要在后端配置CORS（比如用cors中间件），否则会被浏览器拦截请求。
• 数据验证：可以在then里打印processedDevices，确认提取后的数组结构是否符合预期。

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