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

Posted 2023-02-21

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

【英文标题】：How to see create a page of the details of a single product from an Ecommerce

【发布时间】：2022-01-15 22:32:02

【问题描述】：

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

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>

【问题讨论】：

为什么您在 ProductDetail() 中没有收到任何错误？你还没有初始化item。我不认为这是完整的代码。

【参考方案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。

【讨论】：

如何在产品代码上的状态上添加状态？其余的，我最近开始在 react 中编码，所以我不知道很多东西，但将来我会尝试用 API 来做，谢谢

const [item, setItem] = useState() 我在这里使用了状态钩子来管理组件的状态。 Onchange of state 即当 item 的值发生更改时组件将自动重新呈现。您可以在获取数据时使用 setItem( ...new data ...) 更改状态项。当您阅读与钩子相关的文档时会更清楚。文档非常好。