Arrays 数组列表上的反应模式

需要一些帮助吗

我正在尝试将我的数组作为列表提取。在每个列表上，单击（每个列表包含来自数组的数据）打开正确的模式，该模式将包含来自数组数据文件的其余信息。此外，我无法通过我的常量细节提取数组，以便它可以显示我需要的数据，但不确定如何显示。我在我的另一个文件中只调用组件

这是我的密码：

import React，{useState}来自“React”；
//产品数据
从“./products/data”导入{ProductData}；
常数乘积=（）=>{
const[showmodel，setshowmodel]=useState（false）；
常量[hasClass，changeClass]=useState({
activeObject:null，
对象：ProductData.map（（产品）=>{
返回产品id；
}),
});
函数toggleActive（索引）{
设置显示模式（真）；
changeClass（{…hasClass，activeObject:hasClass.objects[index]}）；
}
函数toggleActiveClass（索引）{
if（hasClass.objects[索引]==hasClass.activeObject）{
返回“活动”；
}否则{
返回“不活动”；
}
}
常量详细信息=（ProductData）=>(
{product.name}

{product.subtitle}
{product.grams}
{产品价格}
{product.desc}
{product.cart}
);
返回(

{ProductData.map（（产品，索引）=>(
toggleActive（index）}
className={toggleActiveClass（索引）}
>
{product.name}
{product.subtitle}
{product.grams}
{产品价格}

))}

{showmodel？：null}
);
};
出口默认产品以下是工作示例：

import React, { useState } from "react";

const productData = [
  { id: 1, label: "product1", description: "description1" },
  { id: 2, label: "product2", description: "description2" },
  { id: 3, label: "product3", description: "description3" },
  { id: 4, label: "product4", description: "description4" },
  { id: 5, label: "product5", description: "description5" },
  { id: 6, label: "product6", description: "description6" },
  { id: 7, label: "product7", description: "description7" },
];

const Products = () => {
  const [showModal, setShowModal] = useState(false);
  const [activeObject, setActiveObject] = useState(null);

  function getClass(index) {
    return index === activeObject?.id ? "active" : "inactive";
  }

  // here className can not be "inactive" since Modal always shows activeObject
  const Modal = ({ object: { label, description } }) => (
    <div id="productModal" className="active">
      This is modal
      <h2>{label}</h2>
      <span className="description">{description}</span>
      <button onClick={() => setShowModal(false)}>Close me</button>
    </div>
  );

  return (
    <>
      <ul className="list-menu">
        {productData.map(({ id, label, description }) => (
          <li
            key={id}
            onClick={() => {
              setActiveObject({ id, label, description });
              setShowModal(true);
            }}
            className={getClass(id)}
          >
            <h2>{label}</h2>
          </li>
        ))}
      </ul>
      {showModal ? <Modal object={activeObject} /> : null}
    </>
  );
};

export default Products;

import React，{useState}来自“React”；
const productData=[
{id:1，标签：“product1”，描述：“description1”}，
{id:2，标签：“product2”，描述：“description2”}，
{id:3，标签：“product3”，描述：“description3”}，
{id:4，标签：“product4”，描述：“description4”}，
{id:5，标签：“product5”，描述：“description5”}，
{id:6，标签：“product6”，描述：“description6”}，
{id:7，标签：“product7”，描述：“description7”}，
];
常数乘积=（）=>{
const[showmodel，setshowmodel]=useState（false）；
常量[activeObject，setActiveObject]=useState（null）；
函数getClass（索引）{
返回索引===activeObject？.id？“活动”：“不活动”；
}
//这里className不能是“非活动的”，因为Modal总是显示activeObject
常量模态=（{object:{label，description}}）=>(
这是模态的
{label}
{说明}
setShowModal（false）}>关闭我
);
返回(

{productData.map（{id，label，description}）=>(
{
setActiveObject（{id，label，description}）；
设置显示模式（真）；
}}
className={getClass（id）}
>
{label}

))}

{showmodel？：null}
);
};
出口默认产品；
谢谢！！！！你救了我一天：）