Reactjs 如何将React模态与map函数一起使用？

我正在通过数据映射，我想点击一个图像，并有一个带有data.title和data.info的模式弹出窗口。每个模式仅显示数组中的最后一个数据。我读到所有的模态都出现在一起，我只看到最后一个，但我不太明白如何解决这个问题，特别是在React中的函数组件。短暂性脑缺血发作

 export default function SomeComponent   
 const [modalIsOpen, setModalIsOpen] = 
 useState(false);
 const customStyles = {
  content: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)',
  },
}
  return (
    <div className="container">


    { somedata.map((data) => 
    (<div className='item' key={data.id} >
    <img src={data.img} alt='' onClick={()=> setModalIsOpen(true)} />
    <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} style={customStyles}>
      <h1>{data.title</h1>
      <p>{data.content</p> 
    <div>
    <button onClick={() => setModalIsOpen(false)}>X</button>
    </div>
    </Modal>
   </div>))}
 </div>
</div>
  );}

导出默认函数组件
常量[modalIsOpen，setModalIsOpen]=
useState（假）；
常量自定义样式={
内容：{
前三名：“35%”，
左：50%，
右图：“自动”，
底部：“自动”，
利润率：'-50%'，
宽度：“60%”，
转换：“转换（-40%，-10%），
},
}
返回(
{somedata.map（（数据）=>
(
setModalIsOpen（真）}/>
setModalIsOpen（false）}style={customStyles}>
{data.title
{data.content

setModalIsOpen（false）}>X
))}
);}

您应该只使用

模态组件的一个实例，并使用状态将单击图像的数据传递给它。每次单击图像时，应使用单击图像的数据更新modal的数据。请参见下面的示例。我已经修改了你的代码使它工作

 export default function SomeComponent() {  
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [modalData, setModalData] = useState(null);
   const customStyles = {
    content: {
      top: '35%',
      left: '50%',
      right: 'auto',
      bottom: 'auto',
      marginRight: '-50%',
      width: '60%',
      transform: 'translate(-40%, -10%)',
    },
  }
  return (
    <>
      <div className="container">
        {somedata.map(data => (
          <div className='item' key={data.id} >
            <img 
              src={data.img} 
              alt='' 
              onClick={()=> {
                setModalData(data);
                setModalIsOpen(true);
              }
            />
          </div>
        ))}
      </div>
      <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)} style={customStyles}>
        <h1>{modalData.title}</h1>
        <p>{modalData.content}</p> 
        <div>
         <button onClick={() => setModalIsOpen(false)}>X</button>
        </div>
      </Modal>
    </>
  )
}

导出默认函数SomeComponent（）{
const[modalIsOpen，setModalIsOpen]=使用状态（false）；
const[modalData，setModalData]=useState（null）；
常量自定义样式={
内容：{
前三名：“35%”，
左：50%，
右图：“自动”，
底部：“自动”，
利润率：'-50%'，
宽度：“60%”，
转换：“转换（-40%，-10%），
},
}
返回(
{somedata.map（数据=>(
{
setModalData（数据）；
setModalIsOpen（真）；
}
/>
))}
setModalIsOpen（false）}style={customStyles}>
{modalData.title}
{modalData.content}

setModalIsOpen（false）}>X
)
}
成功了，你太棒了，非常感谢！不客气。尽管我非常感谢你的评论，但如果你喜欢这个解决方案，它也会被认为是最好的答案。我试过了，但我没有任何值得称赞的地方。不用担心，谢谢。