× TypeError: Cannot read property 'image' of undefined

Question

我目前正在开发一个电子商务网站，我在这方面是个新手，当我想将一些图像导入我的页面时遇到了这个错误这是我的 productscreen.js

import React from "react";
import { Link } from "react-router-dom";
import { Row, Col, Image, ListGroup, Button, Card } from "react-bootstrap";
import Rating from "../components/Rating";
import products from "../products";

function ProductScreen({ match }) {
  const product = products.find((p) => p._id === match.params._id)
    return (
    
    <div>
      <Link to="/" className="btn btn-light my-3">
        Go Back
      </Link>
       <Row>
        <Col md={6}> if (!product) { 
        <Image src={product.image} alt={product.name} fluid />
        }
          </Col>

Thats my error message

Answer 1

在代码中添加空检查条件

<Image src={product && product.image} alt={product && product.name} fluid />

Answer 2

在返回之前控制台记录产品并检查它是否正在获取数据希望通过这个你会知道哪里出了问题

Answer 3

您不能在 jsx 语法中使用 if 条件。改成这样：

<Col md={6}> {product && <Image src={product.image} alt={product.name} fluid />}
</Col>

Answer 4

我解决了我的问题 const 代码在我的解决方案中应该是这样的。

function ProductScreen({ match }) {
  const product = products.find((p) => p._id === match.params.id)

我必须在 _id 中删除我的 _ 感谢您的帮助。

× TypeError: Cannot read property 'image' of undefined

× TypeError: Cannot read property 'image' of undefined

javascript

e-commerce

reactjs

react-bootstrap

react-router