我正在使用ReactJS，ANTD表作为框架，但是我可以将数据显示在表中

Question

我正在使用ReactJS和ANTD进行框架，试图用保存在服务器中的数据制作表。我提出以下代码，结果根本不好。请支持我。

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>
            
            {/* Filter */}
            
            {/* Search */}
            
            
            {/* Table */}
            
        
            <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个项目上传到了桌子中，但是有未显示数据。只有5行... 我该如何解决这个问题？

谢谢。

Answer 1

尝试在MAP功能中删除[]

const data = Products.map ((product, index) => ({
     item: product.item,
     grade: product.grade,
     price: product.price,
     box: product.box,
     key: 'index'
}))