1

因此，我有一个名为 !HandleDetail 的函数，一旦单击该函数就会获取该项目并加载详细信息屏幕。当它重新加载时，无论我点击什么对象，它都只显示一个对象。因此，如果我单击 iPhone 并重新加载浏览器，它会重新加载显示的唯一项目（T 恤）对象。我确信这与状态有关，因为我使用状态修复了类似这样的其他错误。我在想我必须映射创建的数组来收集信息并设置它的状态。这是一个视频，显示了我的意思：https://tyriquedaniel14-gmail.tinytake.com/tt/MzYwMDcwN18xMDg4NTEzMQ。为了清楚起见，我试图让详细状态显示具有相同 ID 的相应项目。

 state = {
    products: [],
      clothing: [],
      gadget: [],
    smoke:[],
    detailProduct: detailProduct,
    cart: [],
    modalOpen: false,
    modalProduct: detailProduct,
    cartSubTotal: 0,
    cartTax: 0,
    cartTotal: 0
  };

 getItem = id => {
    const product = this.state.products.find(item => item.id === id);

    return product;
  };

  handleDetail = id => {
    const product = this.getItem(id);
    this.setState(() => {
      return { detailProduct: product };
    });
  };

export const detailProduct = {
  id: 1,
  title: "COMME DES GARCONS TEE",
  img: "img/product-1.png",
  img2: "img/product-1-1.png",
  img3: "img/product-1-2.png",
  img4: "img/product-1-3.png",
  luxury: "All Luxuryitems are inspected to verify authenticity",
  price: 200,
  info: " COMME DES GARCONS PLAY BASIC LOGO TEE",
  inCart: false,
  count: 0,
  total: 0,
  size1: "Small",
  size2: "Medium",
  size3: "Large",
  size4: "Extra Large",
  fabric: "100% Cotton",
  category: "Mens Fashion"
};
 This is My router link
            <Link to="/details">

我试图把它变成所有产品的数组。我尝试添加 map 方法并将 detailProduct 设置为产品。

4

1 回答 1

1

这是反应状态下的正常行为，如果您刷新页面，状态将变为初始状态，因为您使用 t 恤的 detailProduct 将其设置为 const，如果您想根据点击显示特定项目需要将 id 添加到 url，因为每次刷新页面时都会重置您的状态，因此不会记录您单击的操作。

使用带有 id 的 url，例如 details/id，这样您的应用程序就可以记住您访问过的项目

于 2019-06-23T04:37:26.487 回答