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 中的 _，感谢您的帮助。

× 类型错误：无法读取未定义的属性“图像”

4 个答案: