React中map渲染Modal仅显示数组最后一项问题求助

你当前的实现存在两个核心逻辑错误：

• 遍历submitted数组时，为每一条数据都渲染了一个独立的Modal组件
• 所有Modal共用同一个showModal布尔状态，一旦该状态被置为true，所有遍历生成的Modal会同时触发打开，DOM结构中排在最后的Modal会覆盖在所有弹窗最上层，最终视觉上就只会停留在最后一条数据对应的弹窗上。

这种写法除了功能不符合预期，还会额外渲染大量处于隐藏状态的无用Modal组件，造成不必要的性能开销。

整个页面只需要保留1个Modal实例，新增状态存储当前要查看的行数据即可，不需要遍历渲染多个弹窗：

1. 调整Modal相关状态，去掉单独的布尔显示状态，直接用当前选中项判断弹窗是否显示
   替换原有状态代码：

   // 存当前要查看的那条数据，值为null时弹窗关闭
   const [currentItem, setCurrentItem] = useState(null);
   const handleClose = () => setCurrentItem(null);
   // 打开弹窗时，直接传入对应行的数据
   const handleShow = (rowData) => setCurrentItem(rowData);
   

2. 修改表格列配置，点击按钮时把当前行的数据传入弹窗打开方法
   react-bootstrap-table-next的formatter回调默认接收三个参数：单元格值、当前行数据、行索引，直接取行数据传入即可：

   const columns = [
       { 
           dataField: "View", 
           text: "View", 
           formatter: (_, row) => {
               return <Button variant="success" onClick={() => handleShow(row)}>View</Button>
           },
           headerStyle: () => ({ width: "5%" })
       },
       { 
           dataField: "BusinessName", 
           text: "Business Name", 
           headerStyle: () => ({ width: "27%" }) 
       },
   ];
   

3. 删除原有遍历渲染Modal的代码，仅保留单个Modal实例，弹窗内容从currentItem中取值：

   <div>
       <Modal 
           show={!!currentItem} 
           onHide={handleClose} 
           size="lg" 
           centered
       >
           <Modal.Header closeButton>
             <Modal.Title>{currentItem?.BusinessName}</Modal.Title>  
           </Modal.Header>
           <Modal.Body>{currentItem?.Email}</Modal.Body>
           <Modal.Footer>
               <Button variant="secondary" onClick={handleClose}>
                   Close
               </Button>
               <Button variant="primary" onClick={handleClose}>
                   Save Changes
               </Button>
           </Modal.Footer>
       </Modal>
   </div>
   

改完之后点击某一行的View按钮，就会把对应行的数据传入Modal，只会打开一个弹窗，内容完全匹配当前点击的行数据，也不会有多余的组件渲染开销。

内容的提问来源于stack exchange，提问作者It hurts when IP