页面上的所有模式一起打开答案

【问题标题】：All the modals on page open together页面上的所有模式一起打开
【发布时间】：2021-03-21 19:00:58
【问题描述】：

我正在学习 react，但遇到了问题。我有一个包含来自 json 文件的图片的页面。有些模态应该显示我单击的每张完整图片，但是当我单击每张图片时，所有模态都会一起打开。我该如何解决？

我的代码：

import React, { useEffect, useState } from "react";
import axios from "axios";

import Card from "react-bootstrap/Card";
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';

export default function Portfolio() {
  const [state, setState] = useState({ persons: [] });
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(() => {
    axios.get("http://localhost:3000/portfolio-data.json").then((res) => {
      const persons = res.data;
      setState({ persons });
    });
  }, [setState]);

  return (
    <div className="container">
      <div className="portfolio-wrapper">
        {state.persons.map((person) => (
          <>
            <Card
              style={{ width: "18rem" }}
              className="portfolio-card"
              onClick={handleShow}
            >
              <Card.Img variant="top" src={person.src} className="card-pic" />
              <Card.Body>
                <Card.Title>{person.title}</Card.Title>
                <Card.Text>{person.desc}</Card.Text>
              </Card.Body>
            </Card>

            <Modal show={show} onHide={handleClose}>
              <Modal.Header closeButton>
                <Modal.Title>{person.title}</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <Image src={person.src} fluid />
              </Modal.Body>
            </Modal>
          </>
        ))}
      </div>
    </div>
  );
}

【问题讨论】：

所有模式都使用相同的状态变量“show”。您可以打破这一点并为每个人的卡片和模式设置一个单独的组件（以便每个组件都有自己的状态变量）或存储人员的索引 [.map((person, index)=>...)]在节目中。
@Hani 非常感谢你，它真的帮助了我！

标签： javascript reactjs twitter-bootstrap

【解决方案1】：

自从show prop 作用于组件顶部以来，您正在打开每个模态，并且它被传递给每个模态。您可以将人封装在他自己的组件中并在那里处理状态。

import React, { useEffect, useState } from "react";
import axios from "axios";

import Card from "react-bootstrap/Card";
import Image from "react-bootstrap/Image";
import Modal from "react-bootstrap/Modal";

const Person = ({ person }) => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Card
        style={{ width: "18rem" }}
        className="portfolio-card"
        onClick={handleShow}
      >
        <Card.Img variant="top" src={person.src} className="card-pic" />
        <Card.Body>
          <Card.Title>{person.title}</Card.Title>
          <Card.Text>{person.desc}</Card.Text>
        </Card.Body>
      </Card>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>{person.title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Image src={person.src} fluid />
        </Modal.Body>
      </Modal>
    </>
  );
};

export default function Portfolio() {
  const [state, setState] = useState({ persons: [] });
  useEffect(() => {
    axios.get("http://localhost:3000/portfolio-data.json").then((res) => {
      const persons = res.data;
      setState({ persons });
    });
  }, [setState]);

  return (
    <div className="container">
      <div className="portfolio-wrapper">
        {state.persons.map((person, index) => (
          <Person person={person} key={index} />
        ))}
      </div>
    </div>
  );
}

【讨论】：