模态只显示React中映射数组的最后一个元素

Question

现在，如果用户点击按钮，我正在尝试呈现元素各自的内容。现在，由于它为每个元素创建了一个模态，我一按下按钮，它就会打开所有的模态，显示最后一个。

我看了以前有关这方面的问题，如果能提供一些帮助，我将非常感激。

例如，一旦我按下该项目卡的按钮以查看关于该项目的更多信息，它将只显示要映射的数组的最后一个元素的信息。

const [modalIsOpen, setModalIsOpen] = useState(false)
 return (
   <>
  <Grid container
    direction="row"
    className="Project--Items" 
    xs={9} >
    {projects.map((project) => (
      <div key={project.id}className="Project--Card">
        <img src={project.image} className="Item--Main--Image"/>
        <div className="Card--Text">
          <p>{project.name}</p>
          <p>{project.description}</p>
        </div>
        <button onClick={() => setModalIsOpen(true)}>Open Modal</button>
        <Modal isOpen={modalIsOpen} onRequestClose={()=> setModalIsOpen(false)}>
          <h2>{project.name}</h2>
          <p>{project.description}</p>
          <div>
            <button onClick={() => setModalIsOpen(false)}>Close Modal</button>
          </div>
        </Modal>

      </div>
      
    ))}
  </Grid>

  </>
);
}

Answer 1

这里的结构有点不稳定。您应该有一个隐藏的Modale在您的所有内容之上，并简单地传递一些信息给它。它将避免在DOM上呈现无数的情态。

比如：

null

function Modale ({isOpen, onClose, project}){
return isOpen && (
      <>
          <h2>{project.name}</h2>
          <p>{project.description}</p>
          <div>
            <button onClick={onClose}>Close Modal</button>
          </div>
        </>
}

function List (){
const [modalIsOpen, setModalIsOpen] = useState(false)
const [focusProject, setFocusProject] = useState(null)

const onOpenModale = (project) => {
  setModalIsOpen(true)
  setFocusProject(project)
}

const onCloseModale = () => {
  setModalIsOpen(false)
  setFocusProject(null)
}

 return (
   <>
   <Modale isOpen={modalIsOpen} onClose={onCloseModale} project={focusProject}/>
     <Grid container direction="row" className="Project--Items" xs={9} >
        {projects.map((project) => (
          <div key={project.id} className="Project--Card">
            <img src={project.image} className="Item--Main--Image"/>
            <div className="Card--Text">
            <p>{project.name}</p>
            <p>{project.description}</p>
            </div>
          <button onClick={()=> onOpenModale(project)}>Open Modal</button>
         </div>
       ))}
     </Grid>
  </>
);
}

Answer 2

const [modalIsOpen, setModalIsOpen] = useState(false)
const [selectedProject, setSelectedProject] = useState(null);

const expandModal = (project) => {
    setSelectedProject(project);
    setModalIsOpen(true);
}

const closeModal = () => {
    setSelectedProject(null);
    setModalIsOpen(true);
}

 return (
  <Grid container
    direction="row"
    className="Project--Items" 
    xs={9} >
    {projects.map((project) => (
      <div key={project.id}className="Project--Card">
        <img src={project.image} className="Item--Main--Image"/>
        <div className="Card--Text">
          <p>{project.name}</p>
          <p>{project.description}</p>
        </div>
        <button onClick={() => expandModal(project)}>OpenModal</button>
      </div>
    ))}
    <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
      <h2>{selectedProject && selectedProject.name}</h2>
        <p>{selectedProject && selectedProject.description}</p>
        <div>
          <button onClick={closeModal}>Close Modal</button>
        </div>
    </Modal>
  </Grid>
);
}