如何在product.productId下渲染title和img并扔到桌子上？
我還嘗試將最近的事務存盤在另一個狀態中，然后映射它，但它仍然收到最新的。如何存盤投影資訊并將其扔到下面的表格中。
所以這就是我收到的。
{
"_id": "6361f27e499c60ef9ddb147c",
"products": [
{
"productId": {
"_id": "6360d7868044f3048e59bd8c",
"title": "shade",
"img": "https://firebasestorage.googleapis.com/v0/b/tua-ecom.appspot.com/o/1667291013451[object File]?alt=media&token=ea7fe952-6330-44fd-8b21-8fdc84ceb7d2"
},
"quantity": 1,
"sellerId": "6360d4d5bd860240e258c582",
"_id": "6361f27e499c60ef9ddb147d"
}
],
"amount": 10,
"location": "gym",
},
在這張圖片中，我可以成功渲染除 products.productId 之外的所有資訊
因此，我目前正在渲染添加的最新產品，而不是渲染陰影。
const [recentTransaction, setRecentTransaction] = useState([])
const [myProductTitle, setmyProductTitle] = useState([])
useEffect(() => {
const getStats = async () =>{
const res = await userRequest.get(`/order/recent/${id}`)
res.data.map((item) => {
item.products.map((i) => {
setmyProductTitle(i.productId)
})
})
setRecentTransaction(res.data)
setLoading(false)
}
getStats()
},[id])
這就是我渲染表格的方式
{recentTransaction.map((recent) => (
<TableRow key={recent._id}>
<TableCell component="th" scope="row">
{recent._id}
</TableCell>
<TableCell align="left">{recent.userId.firstname}
{recent.userId.lastname}
</TableCell>
<TableCell align="left">{recent.userId.studentId}</TableCell>
<TableCell align="left">
<Box sx={{display: 'flex', alingItems:'center'}}>
<Typography mr={1}>{myProductTitle.title}</Typography>
<Box component="img" sx={{width: '50px'}} src{myProductTitle.img}/>
</Box>
</TableCell>
<TableCell align="left">? {recent.amount}</TableCell>
<TableCell align="left" sx={{display:'flex', alignItems:'center', borderRadius: '5px'}}>
<Typography sx={{padding:1, backgroundColor: 'yellow'}}>
{recent.status}
</Typography>
</TableCell>
</TableRow>
))}
uj5u.com熱心網友回復：
如果我理解正確，您需要在表格單元格內進行迭代，因為products它是一個陣列，因此對于其中的每個元素，在該單元格內列印產品串列及其標題、影像和 ID。
像這樣的東西
<TableCell align="left">
{recent.products.map(product => (
<Box sx={{display: 'flex', alingItems:'center'}}>
<Typography mr={1}>{product.productId.title}</Typography>
<Box component="img" sx={{width: '50px'}} src{product.productId.img}/></Box>
<span>{product.productId._id}</span>
</Box>
)}
</TableCell>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/525301.html
上一篇：單擊其他按鈕時如何保持按鈕可見？
下一篇：物件陣列的型別和介面設定錯誤