故障映射反应带模态

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;