映射反应模式时遇到麻烦

Question

我能够将数据从 json 文件映射到卡片，在卡片页脚中，我有一个按钮来切换模态，但我不断得到相同的模态。在做了一些研究之后，我发现你不能在模态上映射，因为你最终生成了所有模态，它显示了最后一个模态。我只是不知道如何制作它，所以我只能得到正确的一个。

import projects from '../../projects.json';
const Portfolio = () => {
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
return (
<section id='portfolio'>
<Container>
<Row>
{projects.map(project => (
<Col lg='4' sm='6' key={project.id}>
<div>
<Card className='text-center mb-2'>
<CardImg
top
height='100%'
width='100%'
src={require('../../img' + project.image)}
alt={project.title}
/>
<CardBody>
<CardTitle>{project.title}</CardTitle>
<CardText>{project.description}</CardText>
<Row className='justify-content-center'>
<Button color='info' onClick={() => toggle(project.id)}>
My Resume
</Button>
<Modal isOpen={modal} toggle={toggle} size='lg'>
<ModalBody size='lg'>
<img
className='img-fluid'
style={{
width: '100%',
height: '100%'
}}
title='resume'
alt={project.title}
src={require('../../img' + project.image)}
/>
<p>{project.description}</p>
</ModalBody>
<ModalFooter>
<Button
color='info'
className='mr-2 d-flex align-items-center'
href={project.href}
target='_blank'
rel='noopener noreferrer'
>
Check it out
</Button>
<a
className='d-block'
href={project.github}
target='_blank'
rel='noopener noreferrer'
>
<i className='fab fa-github fa-3x text-muted'></i>
</a>
<Button
color='secondary'
className='btn btn-primary btn-xl bg-info'
size='sm'
onClick={toggle}
>
Close
</Button>
</ModalFooter>
</Modal>
</Row>
</CardBody>
</Card>
</div>
</Col>
))}
</Row>
</Container>
</section>
);
};

Answer 1

我实际上能够弄清楚。我最终使用 json 文件中的 id 来切换正确的模态。

import React, { useState } from 'react';
import {
Card,
Container,
Col,
Row,
CardBody,
CardTitle,
CardText,
CardImg,
Button,
Modal,
ModalBody,
ModalFooter
} from 'reactstrap';
import projects from '../../projects.json';
const Portfolio = () => {
const [modal, setModal] = useState(false);
const toggle = project => setModal(project.id);
return (
<section id='portfolio'>
<Container>
<Row>
{projects.map(project => (
<Col lg='4' sm='6' key={project.id}>
<div>
<Card className='text-center mb-2'>
<CardImg
top
height='100%'
width='100%'
src={require('../../img' + project.image)}
alt={project.title}
/>
<CardBody>
<CardTitle>{project.title}</CardTitle>
<CardText className='text-muted'>
{project.description}
</CardText>
<Row className='justify-content-center'>
<Button color='info' onClick={() => toggle(project)}>
More Info
</Button>
<Modal
isOpen={modal === project.id}
toggle={toggle}
size='xl'
>
<ModalBody size='lg'>
<CardImg
className='img-fluid'
size='xl'
style={{
width: '100%',
height: '100%'
}}
title='resume'
alt={project.title}
src={require('../../img' + project.image)}
/>
<p className='mt-4'>{project.description}</p>
</ModalBody>
<ModalFooter>
<Button
color='info'
className='mr-2 d-flex '
href={project.href}
target='_blank'
rel='noopener noreferrer'
>
Check it out
</Button>
<a
className='d-block mr-2'
href={project.github}
target='_blank'
rel='noopener noreferrer'
>
<i className='fab fa-github fa-3x text-muted'></i>
</a>
<Button
color='danger'
className='btn btn-primary btn-xl'
size='md'
onClick={toggle}
>
Close
</Button>
</ModalFooter>
</Modal>
</Row>
</CardBody>
</Card>
</div>
</Col>
))}
</Row>
</Container>
</section>
);
};
export default Portfolio;