显示产品细节的react组件product不呈现任何东西

Question

import React , {useContext} from 'react'
import { Button } from "@mui/material";
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';
import IconButton from '@material-ui/core/IconButton';
import axios from 'axios'
//import {ids} from "./Scanner"
let ids=[{productid:'9501101530003'}]
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
const Item2 = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(2.5),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
export default function Cart (){
console.log(ids)
let products = []

ids.forEach(element => {
console.log(element)
axios.post('http://localhost:4000/app/barcode',element)
.then((response)=>{
console.log(response)
products.push(response.data.product)
console.log(products)
})
});
function Product ({product}){
console.log("g")
console.log(product)
return(  <Box sx={{ width: '100%' }}>
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={4}>
<Item2>{props.product.productName}</Item2>
</Grid> 
<Grid item xs={4}>
<Item2>2</Item2>
</Grid>
<Grid item xs={4} >
<Item> 
<IconButton color="primary">
<AddIcon fontSize='small'/>
</IconButton>
3
<IconButton   color="primary">
<RemoveIcon fontSize='small'/>
</IconButton>
</Item>
</Grid>
</Grid>
</Box>
)
}
return(
<div >
<Box sx={{ width: '100%' }}>
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={4}>
<Item>product name</Item>
</Grid>
<Grid item xs={4}>
<Item>price</Item>
</Grid>
<Grid item xs={4}>
<Item>
quantity
</Item>
</Grid>
</Grid>
</Box>
{products.forEach(element => {
<Product product={element} />
})}
<Box sx={{ width: '100%' }}>
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}  justifyContent="center"
alignItems="center" >
<Grid item xs={4}>
<Item>total</Item>
</Grid>
</Grid>
</Box>
<div>
<Button href='/payment'>pay</Button>
</div>
</div>
)
}      

使用axios的请求返回产品的详细信息。并将该对象添加到products数组中。我想使用产品组件呈现每个产品的详细信息。但是产品组件不呈现任何东西。它不会安慰g。请帮帮我其他一切似乎都很好。

Answer 1

将{products.forEach(element => {<Product product={element} />})}改为:

products.map((element,index)=>(<Product key={index} product={element} />)

因为forEach不返回任何