React Table 数据显示不正确
React Table data displaying incorrectly
我正在通过以下方式获取数据。尽管我希望交换行和列数据,即我希望客户年龄、CRM 和年龄列下的 41562434 等。下面是我的 table 代码:
{!isLoading ? (
<table class="table table-bordered table-secondary" id="tableBorder">
<thead class="first">{
users.map(user => {
const { featureName} = user;
return (
<th style={{ color: "black" }}>{featureName}</th>
);
})
} </thead>
<>
{
users.map(user => {
const { featureTechDescription, sourceSystem, sampleValues} = user;
return (
<>
<tr><td>{featureTechDescription}</td>
<td>{sourceSystem}</td>
<td>{sampleValues}</td></tr>
</>
);
}) }</>
</table>
) : (<h3>Loading...</h3>)
}
我尝试使用的 json 响应的示例数据:---
[
{
"featureName": "Age",
"featureTechDescription": "Customer Age in Whole Months",
"sourceSystem": "CRM",
"sampleValues": [
"41",
"56",
"24",
"34"
]
},
{
"featureName": "Martial Status",
"featureTechDescription": "Marital status of borrower",
"sourceSystem": "CRM",
"sampleValues": [
"Married",
"Single",
"Divorced",
"Not Disclosed"
]
},
{
"featureName": "Customer Since",
"featureTechDescription": "Date of start of relationship between bank and borrower",
"sourceSystem": "CRM",
"sampleValues": [
"1/10/2015"
]
}
]
您正在尝试将每个用户显示在他自己的列中。这是一个小的工作代码和框:https://codesandbox.io/s/xenodochial-dawn-qn6io
不要忘记为每个用户使用 key
,如果你在 React 中创建地图。
<table className="table table-bordered table-secondary" id="tableBorder">
<thead className="first">
<tr>
{users.map(user => (
<th key={user.featureName} style={{ color: "black" }}>
{user.featureName}
</th>
))}
</tr>
</thead>
<tbody>
{["featureTechDescription", "sourceSystem", "sampleValues"].map(
key => (
<tr key={key}>
{users.map(user => (
<td key={user.featureName}>{user[key]}</td>
))}
</tr>
)
)}
</tbody>
</table>
我正在通过以下方式获取数据。尽管我希望交换行和列数据,即我希望客户年龄、CRM 和年龄列下的 41562434 等。下面是我的 table 代码:
{!isLoading ? (
<table class="table table-bordered table-secondary" id="tableBorder">
<thead class="first">{
users.map(user => {
const { featureName} = user;
return (
<th style={{ color: "black" }}>{featureName}</th>
);
})
} </thead>
<>
{
users.map(user => {
const { featureTechDescription, sourceSystem, sampleValues} = user;
return (
<>
<tr><td>{featureTechDescription}</td>
<td>{sourceSystem}</td>
<td>{sampleValues}</td></tr>
</>
);
}) }</>
</table>
) : (<h3>Loading...</h3>)
}
我尝试使用的 json 响应的示例数据:---
[
{
"featureName": "Age",
"featureTechDescription": "Customer Age in Whole Months",
"sourceSystem": "CRM",
"sampleValues": [
"41",
"56",
"24",
"34"
]
},
{
"featureName": "Martial Status",
"featureTechDescription": "Marital status of borrower",
"sourceSystem": "CRM",
"sampleValues": [
"Married",
"Single",
"Divorced",
"Not Disclosed"
]
},
{
"featureName": "Customer Since",
"featureTechDescription": "Date of start of relationship between bank and borrower",
"sourceSystem": "CRM",
"sampleValues": [
"1/10/2015"
]
}
]
您正在尝试将每个用户显示在他自己的列中。这是一个小的工作代码和框:https://codesandbox.io/s/xenodochial-dawn-qn6io
不要忘记为每个用户使用 key
,如果你在 React 中创建地图。
<table className="table table-bordered table-secondary" id="tableBorder">
<thead className="first">
<tr>
{users.map(user => (
<th key={user.featureName} style={{ color: "black" }}>
{user.featureName}
</th>
))}
</tr>
</thead>
<tbody>
{["featureTechDescription", "sourceSystem", "sampleValues"].map(
key => (
<tr key={key}>
{users.map(user => (
<td key={user.featureName}>{user[key]}</td>
))}
</tr>
)
)}
</tbody>
</table>