在map函数中使用React Bootstrap Modal遇到三类异常问题

问题1：模态框弹出时背景完全变黑 #

原因：你在map循环里给每一行都渲染了一个Modal，每个Modal都会生成独立的背景遮罩（backdrop）。当点击按钮触发显示状态时，多个半透明遮罩叠加后就变成了纯黑色。

解决：把Modal从循环中抽离，整个页面只保留一个全局Modal，通过状态控制它的显示/隐藏和内容。

问题2：弹出多个模态框上下叠加 #

原因：循环内每一行都对应一个Modal，当isLoaded状态变为true时，所有Modal都会同时显示，导致叠加。

解决：移除循环内的Modal，只在组件全局渲染一个Modal。

问题3：所有Modal显示相同的about文本 #

原因：用同一个isLoaded状态控制所有Modal，状态更新时循环内的所有Modal都会尝试渲染，React的更新机制会导致最后一个循环项的employeeData.about被复用，或者所有Modal绑定了同一引用。

解决：用状态变量存储当前点击的员工数据，Modal直接读取该状态中的内容。

修改后的完整代码示例 #

import { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

const EmployeeTable = ({ employees }: { employees: any[] }) => {
  // 存储当前选中的员工数据
  const [selectedEmployee, setSelectedEmployee] = useState<any>(null);
  // 控制Modal显示/隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = (employee: any) => {
    setSelectedEmployee(employee);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setSelectedEmployee(null);
  };

  const trDiv = { /* 你的行样式 */ };

  return (
    <>
      <table>
        <tbody>
          {employees.map((employeeData: any, index: any) => (
            <tr key={index} style={trDiv}>
              <td>
                <img
                  style={{ minWidth: '120px', maxWidth: '140px' }}
                  src={employeeData.imageUrl}
                  alt=""
                  className="card-img-top img-thumbnail"
                />
              </td>
              <td>
                {employeeData.firstName} {index}
              </td>
              <td>{employeeData.lastName}</td>
              <td>{employeeData.adress}</td>
              <td>{employeeData.email}</td>
              <td>{employeeData.contactNumber}</td>
              <td>{employeeData.position}</td>
              <td>
                {/* 点击时传入当前员工数据 */}
                <Button variant="primary" onClick={() => openModal(employeeData)}>
                  View
                </Button>
              </td>
              <td>{employeeData.manager_id}</td>
              <td>
                {new Date(employeeData.created_at).toLocaleDateString() +
                  ' ' +
                  new Date(employeeData.created_at).toLocaleTimeString()}
              </td>
              <td>
                {new Date(employeeData.updated_at).toLocaleDateString() +
                  ' ' +
                  new Date(employeeData.updated_at).toLocaleTimeString()}
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* 全局唯一的Modal，放在循环外部 */}
      <Modal show={isModalOpen} onHide={closeModal}>
        <Modal.Header closeButton>
          <Modal.Title>员工详情</Modal.Title>
        </Modal.Header>
        {/* 可选链避免空值报错 */}
        <Modal.Body>{selectedEmployee?.about}</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={closeModal}>
            Close
          </Button>
          <Button variant="primary" onClick={closeModal}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default EmployeeTable;

内容的提问来源于stack exchange，提问作者Danko Grgić