Javascript ReactJs-无法将数据映射到表的行和列

我在调用api时得到了json数组-

[{"sup_Id":6,"sup_ShortCode":"A"},{"sup_Id":7,"sup_ShortCode":"B"},{"sup_Id":8,"sup_ShortCode":"C"},{"sup_Id":1000,"sup_ShortCode":"D"}]

将读取此数组的组件作为-

import React,{useEffect,useState} from 'react'
import axios from 'axios';
function AllSuppliers() {
    const [suppliers, setstate] = useState([])
    useEffect(() => {
        // GET request using axios inside useEffect React hook
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => setstate(x.data))
            .catch(error => {
                alert(error);
                
            });;
    }, []);
    return (
        <>
            <table style={{width: '50%'}}>
            <thead>
                <tr>
                <th>
                    Supplier Id
                </th>
                <th>
                    Supplier Name
                </th>
                
                </tr>
                </thead>
                
                {
                    suppliers.map((supplier)=>{
                        <tr>
                            <td>
                            {supplier.sup_Id}
                            </td>
                            <td>
                            {supplier.sup_ShortCode}
                            </td>
                        </tr>
                    })
                }
               
            </table>
        </>
    )
}

export default AllSuppliers

import React，{useffect，useState}来自“React”
从“axios”导入axios；
功能所有供应商（）{
常量[供应商，设置状态]=使用状态（[]）
useffect（（）=>{
//在useEffect React钩子中使用axios获取请求
axios.get（）http://localhost:62815/api/values/GetAllSuppliers')
.然后（x=>setstate（x.data））
.catch（错误=>{
警报（错误）；
});;
}, []);
返回(
供应商Id
供应商名称
{
供应商地图（（供应商）=>{
{supplier.sup_Id}
{supplier.sup_ShortCode}
})
}
)
}
导出默认的所有供应商

但我得到的输出是-

Json数组不在表内绑定。可能是什么问题？

缺少返回：

suppliers.map((supplier)=> {
    return <tr>
        <td>
        {supplier.sup_Id}
        </td>
        <td>
        {supplier.sup_ShortCode}
        </td>
    </tr>
})

suppliers.map（（供应商）=>{
返回
{supplier.sup_Id}
{supplier.sup_ShortCode}
})

缺少返回：

suppliers.map((supplier)=> {
    return <tr>
        <td>
        {supplier.sup_Id}
        </td>
        <td>
        {supplier.sup_ShortCode}
        </td>
    </tr>
})

suppliers.map（（供应商）=>{
返回
{supplier.sup_Id}
{supplier.sup_ShortCode}
})

解决方案应该是：

                    suppliers.map((supplier)=>{
                    return(
                        <tr>
                            <td>
                                {supplier.sup_Id}
                            </td>
                            <td>
                                 {supplier.sup_ShortCode}
                            </td>
                        </tr>
                        )
                })

suppliers.map（（供应商）=>{
返回(
{supplier.sup_Id}
{supplier.sup_ShortCode}
)
})

---

如果这不能解决问题，那么就要进行数据检索。

解决方法应该是：

                    suppliers.map((supplier)=>{
                    return(
                        <tr>
                            <td>
                                {supplier.sup_Id}
                            </td>
                            <td>
                                 {supplier.sup_ShortCode}
                            </td>
                        </tr>
                        )
                })

suppliers.map（（供应商）=>{
返回(
{supplier.sup_Id}
{supplier.sup_ShortCode}
)
})

---

如果这不能解决问题，那么数据的检索就要开始了。

您能给我们展示一下控制台的结果吗<代码>控制台.log（供应商）在useEffect（）中添加依赖项。这可能会重新呈现您的组件。您可以向我们展示控制台的结果吗<代码>控制台.log（供应商）在useEffect（）中添加依赖项。这可能会重新渲染组件