Modal在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

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>
);
}

Answer 2

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

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>
</>
);
}