将这组对象设置为数组时出现问题

Posted 2023-02-22

【中文标题】将这组对象设置为数组时出现问题

【英文标题】：Having a problem setting this group of objects to an array

【发布时间】：2019-11-05 07:18:30

【问题描述】：

所以，我有一个名为 !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 设置为产品。

【参考方案1】：

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

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

【讨论】：

好的，我将如何实现这个？

点击时需要将产品的id传递给url，你使用react-route吗？没有看到你的代码很难解释

是的，我正在使用 react router dom，当我单击项目时，我有一个句柄详细信息功能，我将在早上上传代码，现在是凌晨 3 点。