如何查看从电子商务中创建单个产品详细信息的页面

Question

我正在开发一个电子商务项目，我设法创建了一个产品网格并链接到特定产品的路线，但我无法看到该项目的数据。 我的产品代码在这里

const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
    justify-content: space-between;
`

const Products = () =>{
    return (
        <Container>
            {products.map(item=>(
                <Product item={item} key={item.id}/>
            ))}
        </Container>
    )
}

export default Products;

我的产品代码在这里

const Product = ({item}:any) => {
    

    return (
        <Container >
            
            <Link to={"/productDetail/" + item.id}>
            <img src={item.image} className='imag'/>
            </Link>

            <Box justifyContent='center' display='flex'>
            <Typography>
                {item.name}
                
            </Typography>
            </Box>
            <Box justifyContent='center' display='flex'>
            <Typography>
                {item.price}

            </Typography>
            </Box>
            <Box justifyContent='center' className='display' >
            <Button className='btn'>Buy</Button>
                </Box>

        </Container>
    )
}

export default Product;

这是我创建单个产品页面的尝试

function ProductDetail() {
    
    let { id } = useParams<{ id: string }>();
    return (
        <div>
            <img src={item.image} className='imag' />
        </div>
    )
}

export default ProductDetail;

而我在首页的路线是这样的：

<Route exact path="/productDetail/:id" >
          < ProductDetail />
        </Route>

Answer 1

您没有看到数据，因为项目未定义。如果您想使用导航将数据传递给 ProductDetail，请尝试将状态添加到 Link 并在 <ProductDetail /> 中使用

// product-grid page
<Link to="path_to_product_detail" state={item}>...</Link>

现在在 <ProductDetail /> 从 react 路由器 dom 中导入 useLocation 方法，该方法将包含添加到链接组件的 state 属性中的数据。

//product-detail page
    const location = useLocation() // import from react-router-dom
    const item = location.state

但是，对于您的用例来说，这不是一个好的做法，因为在产品网格页面中，您只会获取标题、缩略图和 ID 等少数细节。但是在产品描述中，您必须获取有关产品的所有信息，这些信息在产品网格页面中可能不会调用。最好的方法是使用 api 填充详细数据，item。