我正在使用 MERN 堆栈构建购物车。 问题是我的图像没有出现,刷新时图像只是暂时出现。 它向我显示了一个无法显示图像的图标。 我所有的图像都在 src 文件夹内的图像文件夹中。 这是我的代码。

import React, { Component } from "react";
import "../css/styles.css";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Form,
  FormGroup,
  Label,
  Input
} from "reactstrap";
import axios from "axios";
import Cart from "./cart1.component";


export default class BookDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      book: [],
      modal: false,
      cover: ""
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:4000/books/" + this.props.match.params.id)
      .then(response => {
        this.setState({ book: response.data, cover: response.data.cover });
      })
      .catch(function(err) {
        console.log(err);
      });
  }
  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  };

  AddToCart = e => {
    const { book } = this.state;
    let id = book._id;
    let cover = book.cover;
    let price = book.price;
    let qty = 1;
    let product = { id: id, cover: cover, price: price, qty: qty };
    let existing = JSON.parse(sessionStorage.getItem("cart"));
    existing = existing ? existing : [];
    let val = existing.filter(item => item.id === id);
    if (existing.length !== 0) {
      if (val.length != 0) {
        existing.forEach(item => {
          if (item.id === id) {
            item.qty++;
          }
        });
      } else {
        existing.push(product);
      }
    } else {
      existing.push(product);
    }

    sessionStorage.setItem("cart", JSON.stringify(existing));
  };
  getImages = cover => {
    let imagesURL = [
      "../images/csharp.jpg",
      "../images/css.jpg",
      "../images/javascript.jpg",
      "../images/json.jpg",
      "../images/lpthw.jpg",
      "../images/mongodb.jpg",
      "../images/node.jpg",
      "../images/php.jpg",
      "../images/python.jpg",
      "../images/sql.jpg"
    ];

    const bookUrl = `../images/${cover}`;
    let coverUrl = "../images/nocover.jpg";
    imagesURL.forEach(url => {
      if (url == bookUrl) {
        coverUrl = bookUrl;
      }
    });

    return coverUrl;
  };

  render() {
    const { book, quantity } = this.state;
    let src = this.getImages(this.state.cover);
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <img src={src}></img>
          </div>
          <div className="col-sm-6">
            <h2>{book.title}</h2>
            <ul>
              <li>Category: {book.category}</li>
              <li>Author: {book.author}</li>
            </ul>
            <p className="button blue">${book.price}</p>
            <p>{book.description}</p>
            <button
              id={book._id}
              onClick={() => {
                this.toggle();
                this.AddToCart();
              }}
              className="btn btn-success"
            >
              Add to Cart
            </button>
            <Modal isOpen={this.state.modal} toggle={this.toggle}>
              <ModalHeader toggle={this.toggle}>My Cart</ModalHeader>
              <ModalBody>
                <Cart></Cart>
              </ModalBody>
            </Modal>
          </div>
        </div>
      </div>
    );
  }
}

我已经坚持了将近两天了。 我尝试在 src 组件中使用 require ,但这给了我一个错误,无法找到 ../images/nocover.jpg 模块。 请,我真的很感激一些帮助。

  ask by habiba translate from so

本文未有回复,本站智能推荐:

1回复

反应:想要创建一个数组,该数组根据this.state.data.map()函数生成的值自动更新

我正在开发一个使用this.state.data.map()的应用程序,该应用程序使用通过Add组件输入的输入自动生成表格。 生成的输入会根据在应用程序中选择的选项卡而变化。 我想找到在任何时间点生成的每个输入的数量值的总和。 任何帮助,将不胜感激 :)
1回复

使用浏览器路由时未终止的jsx内容?

我想使用浏览器路由和react-router-dom的路由来路由应用程序中的react组件,但是会出错 错误: __文件:__ 我已经尝试过将其制作为无状态组件(路由)并将其呈现为React组件,但是它没有用,并且仍然给出未确定的jsx内容错误
1回复

当用户注销或刷新页面时保存最喜欢的图标,反应,默恩堆栈

大家早上好,我有一个按钮组件,用于控制用户是否想要收藏某样东西。 只要我不注销或刷新页面,一切都像它应该的那样工作。 我觉得我知道如何实现这一点的逻辑,但我似乎无法弄清楚如何去做。 我将收藏夹数组保存在本地存储以及我的数据库中。 我将如何设置按钮的状态以在初始渲染时单击或不单击? 这是我的按钮的代码
2回复

一秒钟后反应组件在heroku上消失

我的网站是https://swiftdeskph.herokuapp.com/当您访问我的网站时,它会显示该组件一秒钟然后它是空的我的观察/问题: 访问任何未指定的路由显示我的 Error404 组件就好了。 即使我的 api 调用出现错误,它也应该返回并在组件中显示错误。 这是我的开发服务器上
1回复

如何处理动态要求图像反应原生

我使用 multer 将图像保存到 MongoDb 到我本地静态文件夹中的路径 /uploads。 当我获取图像时,我从数据库中获取的对象如下所示: 现在我想用 desc 和 image 显示数组,所以我定义了一个平面列表并尝试执行以下操作: 现在我明白 require 应该只获取静态字符串
1回复

LocalStorage不会在MERN应用程序中的页面刷新时保持更新

LocalStorage 不知何故不想在刷新页面上保持更新。 我不确定为什么会这样,我的错误在哪里。 后端正在更新,但 localStorage 没有保持更新。 这是我更新 localStorage 的地方: 这是我尝试使用它的组件:
1回复

在ReactJS中登录后路由时出现404错误

从当前页面登录后,我正在从当前页面路由到仪表板。 但是路由后,它显示找不到页面。 然后刷新页面仪表板开始显示。 我知道这背后的原因。 因为我已经修复了从 sessionStorage 到 U_Id 的路径。 因此,最初它没有获取 U_Id,而是在刷新存储在会话中的 U_Id 之后。 但是我找不到如何
1回复

尝试导航到heroku中的登录路线时出现404错误

我已将我的 mern 应用程序部署到 heroku,但是当我尝试通过输入 url 导航到路由时,它向我显示了 404 页面错误。 导航栏链接工作正常,它们成功地将我导航到登录和注册页面,但是当我单击注册时,表单中的登录链接。 这些链接被破坏了,它给我一个加载资源失败:服务器响应状态为 404(未找到