React列表项点击位置图标时多弹窗同显同内容的问题排查

• 你使用了全局的showLocationPart状态，所有列表项都会依据这个状态判断是否显示弹窗，因此点击任意位置图标后，所有列表项的弹窗会同时触发显示。
• 所有弹窗的内容都依赖同一个selectedItem状态，自然会显示完全相同的地址信息。

最优方案是将弹窗从循环内部移出，整个组件仅渲染一个弹窗，既避免冗余DOM，也彻底解决批量显示的问题：

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

// 状态定义保持不变
const [showLocationPart, setShowLocationPart] = useState(false);
const [selectedItem, setSelectedItem] = useState(null);

const handleModel = item => {
  setSelectedItem(item);
  setShowLocationPart(true);
};

// 渲染列表部分
{data.cdm_provider_actor_roles.map((actorname) => {
  return (
    <div key={actorname.provider_id} className="flex-shrink-0 m-2 bg-white border rounded-lg">
      <div className="w-1/3 flex justify-end mr-3 relative">
        <span 
          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>
        {/* 移除循环内的弹窗代码 */}
      </div>
    </div>
  );
})}

// 单独渲染一个弹窗，放在循环外部
{showLocationPart && selectedItem && (
  <div className="fixed inset-0 flex justify-center items-center z-[999] bg-black/50">
    <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>
)}

• 弹窗使用fixed定位覆盖全屏，并添加半透明背景，既能聚焦用户注意力，也能防止点击弹窗外区域误操作。
• 循环的key改用唯一标识（如actorname.provider_id）代替index，避免列表更新时出现渲染异常。

内容的提问来源于stack exchange，提问作者sarika tr