React新手，我无法获得我想要进入模态的信息

Question

这是我试图完成的第一个React项目，我希望打开模态，并在该模态中显示艺术家的姓名和简历。我已经到了模态可以打开和关闭的地步，但我不知道如何从我的艺术家请求中获取信息，以便进入模态，这样我就可以访问我用于索引页面的app.js中的信息。

这是我的App.js:

import React from "react";
import Container from "react-bootstrap/Container";
// import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
// import NavDropdown from "react-bootstrap/NavDropdown";
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 Modal from "./modal";
import axios from "axios";
export default class Artist extends React.Component {
state = {
artists: [],
modal: false,
};
selectModal = (info) => {
this.setState({ modal: !this.state.modal }); // true/false toggle
};
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">
{/* <Nav className="me-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</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>
<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>
<Modal displayModal={this.state.modal} closeModal={this.handleClose} More Info />
</Card.Body>
</Card>
</Col>
))}
</Row>
</div>
</>
);
}
}
// export default Artist;

这是模式

import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import { Artists } from "./App.js";
class Example extends React.Component {
function Artist() {
render() {
const artists = this.props.artists;
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="danger" onClick={handleShow}>
More Info
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{this.artists.name}</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
{/* <Button variant="primary" onClick={handleClose}>
Save Changes
</Button> */}
</Modal.Footer>
</Modal>
</>
);
}
}
}
export default Example;

我研究过redux和功能组件，但我不知道如何将其理解为模态。如果有任何链接或教程能一步一步地分解它，我们将不胜感激，帮助我走上正轨。

Answer 1

您似乎没有通过道具将艺术家数据解析到<Modal>组件中

<Modal displayModal={this.state.modal} closeModal={this.handleClose} More Info />

应该是

<Modal artists={artist} displayModal={this.state.modal} closeModal={this.handleClose} More Info />

现在您将能够通过<Modal/>组件中的this.props.artists访问艺术家数据。

补充一点，我认为<Artist>组件的命名约定可能会令人困惑。我更倾向于将其称为类似<ArtistList>的东西，因为单个组件从API获取关于多个不同艺术家的数据。希望这能有所帮助。