在项目列表中，当单击列表中的位置图标时，只有相关的地址模式才会使用reactjs打开

Question

在 REact Js 中，我有一个项目列表，列表中的每个项目都有一个位置图标链接，该链接打开一个模式并需要显示相应的地址。

但是对我来说，当我单击特定位置链接时，会同时打开所有模态位置模态，并在所有模态中显示相同的地址。我不知道如何解决它。 我是 React js 的初学者。请帮忙

我有一个项目列表，列表中的每个项目都有一个位置图标链接，可打开模式并需要显示相应的地址。

但是对我来说，当我单击特定位置链接时，会同时打开所有模态位置模态，并在所有模态中显示相同的地址。我不知道如何解决它。 我是 React js 的初学者。请帮忙

我的代码如下

import React, { useState, useEffect } from "react";
import CustomModal from "../../../components/Modal";

const [showLocationPart, setShowLocationPart] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);

const handleModel = item => {
console.log("selectedItem",item);
setSelectedItem(item);
setShowLocationPart(true);
};


{data.cdm_provider_actor_roles.map((actorname, index) => {
return (

  <div className="w-1/3 flex justify-end mr-3 relative" key={actorname.provider_id}>
    <span  key={actorname.provider_id} 
      className="bg-[#E9F2EF]  w-1/3 p-1 justify-center flex rounded-lg  text-[#0CA387] font-semibold cursor-pointer "
      onClick={() => handleModel(actorname)}
    >
      {" "}
      <img src={CDMLocationIcon} className="w-4" />
    </span>
    {showLocationPart ? (
      <div key={selectedItem.provider_id} className="absolute top-7 justify-center items-center flex  z-[999p] outline-none focus:outline-none">
        <div className=" mx-0 w-[350px] h-auto shadow-light  rounded-2xl p-4 bg-gray-50">
          <div className="flex">
            <div className="w-1/6">
              <div className="bg-[#E9F2EF] p-2 ml-2 mr-2 justify-center flex rounded-lg  text-[#0CA387] font-semibold">
                <img src={CDMLocationIcon} className="w-4" />
              </div>
            </div>

            <div className="w-4/6 text-xs font-semibold" >
              <h5>Address:</h5>
              <p>
              {selectedItem.cdm_provider.name}
              </p>

             <h5 className="pt-3">Opening Hours:</h5>
              <p>{selectedItem.cdm_provider.working_hours}</p>

              <p className="pt-3">Ph: {selectedItem.cdm_provider.phone_number}</p>
              <p>Fax: {selectedItem.cdm_provider.fax}</p>

              <h5 className="pt-3">Visit:</h5>
              <p> {selectedItem.cdm_provider.website}</p>
    
            </div>

            <div
              className="w-1/6 cursor-pointer justify-end flex"
              onClick={() => setShowLocationPart(false)}
            >
              {" "}
              <img src={CMDCloseIcon} className="w-3 h-3" />
            </div>
          </div>
        </div>
      </div>
    ) : null}
    </div>
    </div>

）； })}

handleModel(actorname)是图标点击.

Answer 1

import React, { useState } from "react";
import CustomModal from "../../../components/Modal";

const YourComponent = ({ data }) => {
  const [selectedItem, setSelectedItem] = useState(null);
  const [showLocationParts, setShowLocationParts] = useState(
    Array(data.cdm_provider_actor_roles.length).fill(false)
  );

  const handleModel = (item, index) => {
    console.log("selectedItem", item);
    setSelectedItem(item);
    const updatedShowLocationParts = [...showLocationParts];
    updatedShowLocationParts[index] = true;
    setShowLocationParts(updatedShowLocationParts);
  };

  const handleClose = (index) => {
    const updatedShowLocationParts = [...showLocationParts];
    updatedShowLocationParts[index] = false;
    setShowLocationParts(updatedShowLocationParts);
  };

  return (
    <>
      {data.cdm_provider_actor_roles.map((actorname, index) => (
        <div
          className="w-1/3 flex justify-end mr-3 relative"
          key={actorname.provider_id}
        >
          <span
            className="bg-[#E9F2EF]  w-1/3 p-1 justify-center flex rounded-lg  text-[#0CA387] font-semibold cursor-pointer "
            onClick={() => handleModel(actorname, index)}
          >
            {" "}
            <img src={CDMLocationIcon} className="w-4" />
          </span>
          {showLocationParts[index] && (
            <div className="absolute top-7 justify-center items-center flex  z-[999p] outline-none focus:outline-none">
              <div className=" mx-0 w-[350px] h-auto shadow-light  rounded-2xl p-4 bg-gray-50">
                {/* your modal content */}
                <div
                  className="w-1/6 cursor-pointer justify-end flex"
                  onClick={() => handleClose(index)}
                >
                  {" "}
                  <img src={CMDCloseIcon} className="w-3 h-3" />
                </div>
              </div>
            </div>
          )}
        </div>
      ))}
    </>
  );
};

export default YourComponent;

showLocationParts

是本示例中的一个数组，用于跟踪每个项目的模态状态。现在，handleModel 和handleClose 方法获取项目和索引并更新项目的状态。该索引决定了项目的模态是否应该显示或隐藏。