我已成功使用 Node+Express+MSSQL 创建了后端 API，并使用 POSTMAN 测试了路由。现在最有挑战性的部分是，当我尝试使用 React Functional 组件/钩子将数据呈现到前端时，我遇到了一些错误。我不确定这是否是使用 API 将标签呈现到 React 页面的正确方法。此外，我确保我的表中没有重复的 ID，因为这可能会导致更多错误，并且它是一个可以从“KEY”属性中使用的唯一字段。

以下是尝试获取输出的 React 代码

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import '../App.css';

const Ctms = (props) => {

const url = 'http://localhost:8090/api/ctms'
const [normac, setNormac] = useState()

useEffect(() => {
axios.get(url)
.then(response => {
console.log(response.data)
setNormac(response.data)
})

}, [url]);

if(normac) {

    return(
    <div>
    {normac.map((ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) => (
    
    <div key ={ID.value}>
    
    <p key ={ID.value}>Shop Order : {shop_order.value}</p>
    <p key ={ID.value}>Item Number : {item_number.value}</p>
    <p key ={ID.value}>Item Desc : {item_desc.value}</p>
    <p key ={ID.value}>Machine : {machine.value}</p>
    <p key ={ID.value}>Supplier : {supplier.value}</p>
    <p key ={ID.value}>Feet Coil : {feet_coil.value}</p>
    <p key ={ID.value}>Date On : {Date_on.value}</p>
    <p key ={ID.value}>Load Number : {load_no.value}</p>
    <p key ={ID.value}>Load PC Signoff : {loadpc_signoff.value}</p>
    <p key ={ID.value}>PC Staff Load : {pc_staff_load.value}</p>
    <p key ={ID.value}>Unload PC Signoff : {unloadpc_signoff.value}</p>
    <p key ={ID.value}>PC Staff Unload : {pc_staff_unload.value}</p>
    <p key ={ID.value}>Date Off : {Date_off.value}</p>
    <p key ={ID.value}>CTMS ID : {ctms_id.value}</p>
    <p key ={ID.value}>Complete : {complete.value}</p>
    
    </div>
    
    ))}
    </div>
    )}
    
return (
<h1>Check the KepServer tags!!!</h1>
)
}

export default Ctms;

示例 DB Fiddle

CREATE TABLE ctms (
    ID INT,
    shop_order NCHAR(20),
    item_number NCHAR(20),
    item_desc NCHAR(50),
    machine NCHAR(10),
    supplier NCHAR(20),
    feet_coil NCHAR(10),
    Date_on NCHAR(10),
    load_no NCHAR(15),
    loadpc_signoff NCHAR(10),
    pc_staff_load NCHAR(10),
    unloadpc_signoff NCHAR(10),
    pc_staff_unload NCHAR(15),
    Date_off NCHAR(10),
    ctms_id NCHAR(15),
    complete NCHAR(10)
);
    

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  123456','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379669','y');

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  456789','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379670','y');

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  987654','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379671','y');

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  654321','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379672','y');

我收到的错误（ 错误参考 ）

• 未捕获的 TypeError：无法读取未定义的属性（读取“值”）
• 组件中发生上述错误