React新手求助：如何将艺术家数据传入Modal组件展示

一、核心问题梳理 #

你的代码目前存在两个核心问题：

1. 模态框的状态和数据没有统一在父组件（App.js）管理，导致数据无法传递
2. Modal组件存在语法错误（类组件中混用Hook、函数嵌套定义）

下面是分步修复方案：

二、修复App.js #

1. 扩展状态与方法 #

在父组件中统一管理模态框的显示状态和选中的艺术家数据：

import React from "react";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
import Row from "react-bootstrap/Row";
import Card from "react-bootstrap/Card";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import ArtistModal from "./ArtistModal"; // 重命名Modal组件避免冲突
import axios from "axios";

export default class Artist extends React.Component {
  state = {
    artists: [],
    showModal: false,
    selectedArtist: null, // 存储当前选中的艺术家
  };

  // 打开模态框并传入对应艺术家
  openModal = (artist) => {
    this.setState({
      showModal: true,
      selectedArtist: artist
    });
  };

  // 关闭模态框
  closeModal = () => {
    this.setState({
      showModal: false,
      selectedArtist: null
    });
  };

  componentDidMount() {
    axios.get("http://localhost:3000/artists").then((res) => {
      const artists = res.data;
      this.setState({ artists });
    });
  }

  render() {
    return (
      <>
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
          <Container>
            <Navbar.Brand href="#home">Horrorcore Bible</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav"></Navbar.Collapse>
          </Container>
        </Navbar>

        <div style={{ backgroundColor: "#BA1313" }}>
          <Row xs={1} md={3} className="g-4">
            {this.state.artists
              .sort((a, b) => a.name.localeCompare(b.name))
              .map((artist) => (
                <Col key={artist.id}> {/* 必须添加唯一key */}
                  <Card className="text-center" border="dark" style={{ width: "27.95rem", backgroundColor: "black" }}>
                    <Card.Img
                      variant="top"
                      src={artist.image}
                      alt="artist"
                      className="image"
                      style={{ height: 400, width: 445 }}
                    />
                    <Card.Body>
                      <Card.Title style={{ textAlign: "center", color: "white" }}>{artist.name}</Card.Title>
                      {/* 按钮触发打开模态框，传入当前艺术家 */}
                      <Button variant="danger" onClick={() => this.openModal(artist)}>
                        More Info
                      </Button>
                    </Card.Body>
                  </Card>
                </Col>
              ))}
          </Row>
          {/* 模态框只渲染一次，通过props切换内容 */}
          <ArtistModal 
            show={this.state.showModal} 
            closeModal={this.closeModal} 
            artist={this.state.selectedArtist} 
          />
        </div>
      </>
    );
  }
}

三、重构Modal组件 #

将原Modal组件重命名为ArtistModal.js，移除语法错误，通过props接收数据：

import React from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

export default class ArtistModal extends React.Component {
  render() {
    const { show, closeModal, artist } = this.props;
    // 没有选中艺术家时不渲染内容
    if (!artist) return null;

    return (
      <>
        <Modal show={show} onHide={closeModal}>
          <Modal.Header closeButton>
            <Modal.Title>{artist.name}</Modal.Title>
          </Modal.Header>
          <Modal.Body>{artist.bio || "暂无艺术家简介"}</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={closeModal}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

四、关键说明 #

1. 状态提升：把模态框的显示状态和选中的艺术家数据统一放在父组件管理，这是React组件间数据传递的基础方案，无需使用Redux
2. Props传递：父组件通过props将状态和方法传给子组件，子组件根据props渲染内容并触发父组件的方法
3. 性能优化：模态框只渲染一次，通过props切换显示内容，避免循环渲染多个模态框
4. 语法规范：类组件中不能使用useState等Hook，需遵循类组件的写法规范

内容的提问来源于stack exchange，提问作者PhilipJobe