ReactJS使用AntD Table组件无法正常渲染服务端返回表格数据

问题背景 #

项目采用ReactJS、AntD作为开发框架，对接服务端接口拉取商品存储数据渲染Table表格时出现异常：已通过上传页向服务端上传5条商品数据，但页面表格仅渲染出5个空白行，未展示任何实际数据内容。
相关实现代码如下：

import React, { useEffect, useState } from 'react'
import { FaCode } from "react-icons/fa";
import axios from "axios";
import { Card, Button, Col, Row, Table } from 'antd';
import { SketchOutlined } from '@ant-design/icons';

function LandingPage() {
    
    const [Products, setProducts] = useState ([]);
    
    useEffect(()=> {
        axios.post('/api/product/products')
            .then(response => {
                if (response.data.success) {
                    setProducts(response.data.productInfo)
                } else {
                    alert("상품을 가져오는데 실패하였습니다.")
                }
        })
    }, [])
    
    const data = Products.map ((product, index) => (
        [{
            item: product.item,
            grade: product.grade,
            price: product.price,
            box: product.box,
            key: 'index'
        }] 
    ))
    
    const columns = [
        {
            title: '품명',
            dataIndex: 'item',
            key:'key',
            render: item =>{
            return <a>{item}</a>
            }
        },
        {
            title: '등급',
            dataIndex: 'grade',
            key:'key'
        },
        {
            title: '수량',
            dataIndex: 'box',
            key:'key'
        },
        {
            title: '가격(원)',
            dataIndex: 'price',
            key:'key'
        }
    ]

    console.log('products', Products)

    return (
        <div style={{ width: '75%', margin: '3rem auto' }}>
            <div style={{ textAlign: 'center' }}>
                <h2> 재고자료 <SketchOutlined /></h2>
                <h3>재고 LIST</h3>
            </div>
            <Table
                columns={columns}
                dataSource={data}
            />
            <br />
            <br />
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button type="primary">See More</Button>
            </div>
        </div>
    )
}

export default LandingPage

运行效果参考：5行空白表格截图

问题根因 #

代码里存在两个核心错误，导致表格无法读取数据：

1. 数据源格式错误：构造data变量时，给每个商品对象额外包裹了一层方括号[]，最终传给Table的dataSource是二维数组（结构为[[{...}], [{...}]]），但AntD Table要求数据源必须是一维对象数组，嵌套数组结构下表格无法匹配列对应的字段。
2. key值错误：遍历生成数据时，key: 'index'写死为固定字符串，没有使用遍历拿到的index变量，所有行的key完全重复，也会导致渲染异常。

修复方案 #

最小修改方案 #

直接修正data的构造逻辑，去掉外层包裹的数组，将key改为动态的唯一值：

const data = Products.map ((product, index) => ({
    item: product.item,
    grade: product.grade,
    price: product.price,
    box: product.box,
    key: index // 去掉引号，使用遍历的索引作为key，有商品唯一ID的话优先用唯一ID
}))

更简洁的优化写法 #

不需要额外遍历构造data变量，直接使用接口返回的商品数据，通过Table的rowKey属性指定唯一标识即可：

<Table
    columns={columns}
    dataSource={Products} // 直接传入接口返回的数组
    rowKey={(record) => record.id || record._id} // 替换为商品数据里的唯一标识字段名
/>

后续排查 Checklist #

如果修改后仍有问题，按以下顺序排查：

• 打开控制台查看console.log('products', Products)的输出，确认接口返回的商品字段名和columns里配置的dataIndex完全一致（注意大小写、字段是否嵌套在对象子属性里）
• 确认接口请求确实返回了5条有效商品数据，success字段为true
• 检查AntD版本和写法是否匹配，4.x/5.x版本Table支持当前columns配置写法，无需额外引入Column组件

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