首页 > 解决方案 > × TypeError:无法读取未定义的属性“图像”

问题描述

我目前正在开发一个电子商务网站我在这个领域很新当我想将一些图像导入我的页面时遇到了这个错误这是我的 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>

那是我的错误信息

标签: javascriptreactjsreact-routere-commercereact-bootstrap

解决方案


在代码中添加空检查条件

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

推荐阅读