函数总是对最后一个映射对象执行操作，而不是我在模态中选择的对象

Question

我正在使用 react-modal 库来创建模式，我已经映射了代表音乐专辑的对象。我想用对象旁边的按钮打开模态，并调用具有该对象所有属性的函数。问题是，当我尝试这样做时，在 Modal 内部，它总是调用具有最后映射对象属性的函数。它是这样的：

const [modalIsOpen, setIsOpen] = useState(false);

(...)

     function openModal() {
       setIsOpen(true);
     }

     function closeModal() {
       setIsOpen(false);
     }

(...)

<div className="card-body">
   {album.map(album =>
       <div key={album}>
           <img src={album.imageUrl} alt="cover"/>
           {album.artistName} - {album.albumName}
           <button onClick={() => deleteBought(album)}>Delete from bought</button>  // this one works well
           <button onClick={openModal}>Delete from bought (modal)</button>
           <Modal
               isOpen={modalIsOpen}
               onRequestClose={closeModal}
               style={customStyles}
               contentLabel="Example Modal"
           >
               <button onClick={() =>  closeModal()}>Close</button>
               <button onClick={() =>  {deleteBought(album);closeModal()}}>Delete</button> // this one passes properties of last object
           </Modal>
       </div>
       )}
</div>

如何在打开的模式中引用正确的对象？

Answer 1

这样就可以了，而且地图中不需要放Modal组件

const [modalIsOpen, setIsOpen] = useState(false);
  const [activeAlbum, setActiveAlbum] = useState(null);
  const album = [
    { id: 1, artistName: "name1", albumName: "albumName1" },
    { id: 2, artistName: "name2", albumName: "albumName2" }
  ];

  const AlbumModal = ({ album }) => (
    <Modal
      isOpen={modalIsOpen}
      onRequestClose={() => setIsOpen(false)}
      contentLabel="Example Modal"
    >
      <h1>{album.albumName}</h1>
      <button onClick={() => setIsOpen(false)}>Close</button>
      <button onClick={() => setIsOpen(false)}>Delete</button>
    </Modal>
  );

  return (
    <div className="card-body">
      {album.map((album) => (
        <div key={album}>
          {<img src={album.imageUrl} alt="cover"/>}
          {album.artistName} - {album.albumName}
          <button
            onClick={() => {
              setIsOpen(true);
              setActiveAlbum(album);
            }}
          >
            Delete from bought (modal)
          </button>
        </div>
      ))}
      {activeAlbum && <AlbumModal album={activeAlbum} />}
    </div>
  );

函数总是对最后一个映射对象执行操作，而不是我在模态中选择的对象

Function always performs action on last mapped object rather than the one i choose while in Modal

javascript

reactjs

react-modal

react-hooks