数组不使用 useParams() 过滤/映射答案

【问题标题】：Array not filtering/mapping with useParams()数组不使用 useParams() 过滤/映射
【发布时间】：2021-09-22 11:45:50
【问题描述】：

我希望能够在您点击某个产品时显示该产品的更多信息。单击产品时会显示正确的 id，但没有图像映射到 product/:id 它只是一个空 div。谢谢！

//我正在过滤/映射的数据

const products = [
  {
    id: 1,
    name: 'Dangle Links',
    image: '/images/danglelinkgreen.jpg',
    description: 'Handmade Clay Earings.',
    price: 30.00,
    inStock: true,
  },
  {
    id: 2,
    name: 'Abstract Links',
    image: '/images/abstractlink.jpg',
    description: 'Handmade Clay Earings.',
    price: 30.00,
    inStock: true,
  },
  {
    id: 3,
    name: 'Arches',
    image: '/images/arches2.jpg',
    description: 'Handmade Clay Earings.',
    price: 30.00,
    inStock: true,
  },
  {
    id: 4,
    name: 'String Of Pearls',
    image: '/images/stringofpearls1.jpg',
    description: 'Handmade Clay Earings.',
    price: 37.00,
    inStock: true,
  },
]

export default products;

//我是如何使用useParams的

import React from 'react'
import { Link, useParams } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
import products from '../products'
import Product from '../components/Product'


const ProductScreen = () => {
    const { id } = useParams()
  
    return (
    <>
          <Link className='btn btn-light my-3' to='/'>
              GO BACK
          </Link>
              <div>
              <Row>
                <Col md={8}>
                {products.filter(product => product.id === id).map((product) => (
                      <div>
                          <Image src={product.image} alt={product.name} />
                      </div>
                ))}
                </Col>
                <Col md={4}></Col>
               </Row>
              </div>
    </>
  )
}

export default ProductScreen

//App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import Header from './components/Header';
import Footer from './components/Footer';
import Review from './components/Review'
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import products from './products'




const App = () => {
  return (
    <Router>
      <Header />
      <main className='py-3'>
        <Container>
          <Route exact path='/'>
            <HomeScreen />
          </Route>
                 
          <Route path='/product/:id'>
            <ProductScreen product={products}/>
          </Route>
        </Container> 
      </main>
      <Review />  
      <Footer />
    </Router>
  );
}

export default App;

不确定是否重要，但 Product 组件嵌套在 HomeScreen.js 中，而不是直接嵌套在 App.js 中，就像这样..

//Product.js

import React from 'react'
import { Link } from 'react-router-dom'
import { Card } from 'react-bootstrap'



const Product = ({ product }) => {
  return (
    <Card className='my-3 p-3 rounded'>
      <Link to={`/product/${product.id}`}>
        <Card.Img src={product.image} variant='top' />
      </Link> 

      <Card.Body>
        <Link to={`/product/${product.id}`}>
        <Card.Title as='div'><strong>{product.name}</strong></Card.Title>
        </Link> 

        <Card.Text as='h3'>
              ${product.price}
        </Card.Text>
      </Card.Body>   
    </Card>
  )
}

export default Product

//主屏幕

import React from 'react'
import products from '../products'
import Product from '../components/Product'
import { Row, Col } from 'react-bootstrap'

const HomeScreen = () => {
  return (
    <>
      <h1>Jewelry</h1>
      <Row>
        {products.map((product) => (
          <Col sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
          </Col>
        ))}
      </Row> 
    </>
  )
}

export default HomeScreen

【问题讨论】：

您使用的是product.price 属性，而不是设置product.image 属性。我认为这就是问题所在。
抱歉，我在尝试查看是否有任何属性可以映射后复制了文本。
如果您尝试了image 属性但它不起作用，这意味着应该接收该请求的后端有问题，而不是这里。
在我必须在 URL 前加上 http://localhost/ 来解决它之前，我遇到了类似的问题，这是因为我的前端和后端在开发过程中运行在不同的服务器上。
您可以通过查看开发者工具>网络选项卡，找到更多的问题，找到对图像的请求并查看那里的错误消息。

标签： reactjs react-hooks

【解决方案1】：

为了显示图片，图片标签的src 属性应该包含图片网址而不是产品价格。

{products.filter(product => product.id === id).map((product) => (
      <div>
          <Image src={product.image} alt={product.name} />
      </div>
))}

您也可以考虑使用Array.find 而不是filter 和map，因为您正在使用单个产品，所以在 jsx 代码之外加载该单个产品

product = product.find(id => product.id === id);

然后直接在显示中使用product。

【讨论】：