【发布时间】：2021-04-22 10:53:06
【问题描述】：
我是 React 新手，目前正在做我的第一个项目。我有一个从 API 获得的数据。现在我需要以图像中的格式显示数据。我知道 map 函数，但我无法将嵌套对象映射到同一行。{
"data": [
{
"ks_ref": {
"id": 7,
"shelf_position": 1,
"mapped_shelf_name": "Shelf A",
"mapped_kiosk_name": "Kiosk 1",
"mapped_shelf_basket_name_reference": [
{
"id": 1,
"basket_position": 1,
"mapped_basket_name_reference": [
{
"id": 1,
"mapped_basket_name": "B1",
"mapped_product_name": "ABC",
"available_product_quantity": 400,
"available_product_quantity_units": "Units",
}
]
},
{
"id": 3,
"basket_position": 2,
"mapped_basket_name_reference": [
{
"id": 1,
"mapped_basket_name": "B1",
"mapped_product_name": "XYZ",
"available_product_quantity": 400,
"available_product_quantity_units": "Units",
}
]
},
]
},
}
]
}
这是我的方法。我无法将嵌套对象映射到 html 表的同一行。
const [allMappingData, setAllMappingData] = useState([]);
setAllMappingData(res.data.data);
return (
<div className="container-fluid" style={{ maxWidth: "1000px" }}>
<div className="py-4">
<h2 style={{ textAlign: "center" }} className="mb-3">
{" "}
Listing All Mappings
</h2>
<Link
className="btn btn-outline-dark float-left mb-2"
id="basketback"
to="/home"
>
Back
</Link>
<Link
className="btn btn-outline-dark float-right mb-2"
id="addBasket"
to="/mappings/kioskshelfmapping"
>
Kiosk-Shelf Mapping
</Link>
<Link
className="btn btn-outline-dark float-right mb-2 mr-2 ml-2"
id="shelfbasketmapping"
to="/mappings/shelfbasketmapping"
>
Shelf-Basket Mapping
</Link>
<Link
className="btn btn-outline-dark float-right mb-2"
id="basketproductmapping"
to="/mappings/basketproductmapping"
>
Basket-Product Mapping
</Link>
<div style={{ width: "100%", overflow: "hidden" }}>
{/* <div style={{ width: "320px", float: "left" }}> */}
<table className="table border shadow" id="AllMapTable">
<thead className="thead-dark">
<tr>
<th style={{ textAlign: "center" }} scope="col">
#
</th>
<th style={{ textAlign: "center" }} scope="col">
Kiosk
</th>
<th style={{ textAlign: "center" }} scope="col">
Shelf
</th>
<th style={{ textAlign: "center" }} scope="col">
Shelf Position
</th>
<th style={{ textAlign: "center" }} scope="col">
Basket Position
</th>
<th style={{ textAlign: "center" }} scope="col">
Basket Name
</th>
<th style={{ textAlign: "center" }} scope="col">
Product Name
</th>
<th style={{ textAlign: "center" }} scope="col">
Available Product Quantity
</th>
</tr>
</thead>
<tbody>
<tr>
{allMappingData.map((item, index) => (
<React.Fragment
style={{ textAlign: "center" }}
key={index + 1}
>
<th className={{ textAlign: "center" }}>{index + 1}</th>
<td className={{ textAlign: "center" }}>
{item.ks_ref.mapped_kiosk_name}
</td>
<td className={{ textAlign: "center" }}>
{item.ks_ref.mapped_shelf_name}
</td>
<td className={{ textAlign: "center" }}>
{item.ks_ref.shelf_position}
</td>
</React.Fragment>
))}
【问题讨论】：
-
您能否提出您的方法以便我们为您提供帮助？
-
您好，我添加了解决此问题的方法。但我无法将嵌套对象映射到 html 表的同一行。
-
欢迎@Raj123 - 谢谢你的问题。不幸的是，很难理解您的确切问题是什么。请尝试关注与了解您的问题相关的部分资产。您可能想查看stackoverflow.com/help/how-to-ask 以了解有关如何改进您的问题的更多信息。
-
是的，我会努力的。非常感谢。
标签： javascript html reactjs multidimensional-array