Reactjs GET METHOD从表中的api获取数据

Question

这就是我在组件文件中的内容

<div>
<Table striped>
<thead>
<tr>
<th>#Number</th>
<th>item</th>
<th>description</th>
<th>quantity</th>
<th>price</th>
</tr>
</thead>
<tbody>
{items && items.map(item => {
return (
<tr>
<th scope="row">{item.id}</th>
<td>{item.items.map(item => <tr>{item.description}</tr>)}</td>
<td>{item.items.map(item => <tr>{item.item}</tr>)}</td>
<td>{item.items.map(item => <tr>{item.quantity}</tr>)}</td>
<td>{item.items.map(item => <tr>{item.price}</tr>)}</td>
</tr>
);
})}
</tbody>
</Table>
</div>

这是我从api 得到的json

[
{
"id": 1,
"invoiceno": "invoice1",
"description": "invoice1",
"taxrate": 10,
"issuedate": "2021-07-14T23:00:00.000Z",
"duedate": "2021-07-15T23:00:00.000Z",
"note": "invoice1",
"taxamount": 10,
"subtotal": 100,
"total": 100,
"updatedAt": "2021-05-26T23:00:00.000Z",
"updatedBy": 14,
"createdAt": "2021-06-01T23:00:00.000Z",
"createdBy": 25,
"items": [
{
"id": 1,
"description": "item1",
"item": 25,
"quantity": 23,
"price": 23,
"idInvoice": 1
},
{
"id": 2,
"description": "item2",
"item": 23,
"quantity": 15,
"price": 12,
"idInvoice": 1
}
]
}
]

我只想得到这些物品，但当我把它们放在桌子上时，它们一直显示在同一行，就像这张照片一样。我想把它们分开。我做错了什么在此处输入图像描述

这是我正在使用的GET METHOD函数，所以你可以很好地看到它

const [items, setItems] = useState([])
const getItems= () => {
fetch(`${process.env.REACT_APP_API_URL}/invoice/${urlElements[4]}`, 
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-business-name' : 'billings',
"Accept":"application/json"
},
})
.then(response => response.json())
.then(items => setItems(items))
.catch(err => console.log(err))
}
useEffect(() => {
getItems()
}, []);

Answer 1

您不应该将tr直接嵌套在td中，但它仍然按照代码的指示执行。第一行将主对象的id(#1(打印到第一个th中，然后打开一个td并将每个子item迭代到tr中，在您的情况下，这意味着每个td都有两个条目(子项1和子项2(。

更新-您的状态items是一个数组，然后您也希望在每个数组中嵌套items。这是一个基于我能看到的你的代码部分的例子，还有一些我必须弥补的东西，因为我看不到所有的

export default function MyComponent() {
// Renaming so it's more clear and doesn't conflict with the
// child `items`
const [itemsFromApi, setItemsFromApi] = useState([])

// Renaming
const getItemsFromApi = () => {
fetch(`${process.env.REACT_APP_API_URL}/invoice/${urlElements[4]}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-business-name' : 'billings',
"Accept":"application/json"
},
})
.then(response => response.json())
.then(data => setItemsFromApi(data))
.catch(err => console.log(err))
}
useEffect(() => {
getItemsFromApi()
}, []);
// itemsFromApi is an array, so you either need to get
// itemsFromApi[0] for the first object in the array,
// or if you want to iterate all of the itemsFromApi, you'll
// need to handle that in a loop too.
// If you just want the first itemsFromApi object
return (
<div>
<Table striped>
<thead>
<tr>
<th>#Number</th>
<th>item</th>
<th>description</th>
<th>quantity</th>
<th>price</th>
</tr>
</thead>
<tbody>
{itemsFromApi.length > 0 && itemsFromApi[0].items && itemsFromApi[0].items.map(item => {
return (
<tr>
<th scope="row">{item.id}</th>
<td>{item.description}</td>
<td>{item.item}</td>
<td>{item.quantity}</td>
<td>{item.price}</td>
</tr>
);
})}
</tbody>
</Table>
</div>
)
// Or if you want a full table for each of the itemsFromApi objects
return (
<div>
{itemsFromApi.map((itemFromApi) => (
<Table striped>
<thead>
<tr>
<th>#Number</th>
<th>item</th>
<th>description</th>
<th>quantity</th>
<th>price</th>
</tr>
</thead>
<tbody>
{itemFromApi.items && itemFromApi.items.map(item => {
return (
<tr>
<th scope="row">{item.id}</th>
<td>{item.description}</td>
<td>{item.item}</td>
<td>{item.quantity}</td>
<td>{item.price}</td>
</tr>
);
})}
</tbody>
</Table>
)}
</div>
)
}