当我运行以下代码并单击“读取”按钮时,即使我渲染的组件很少,数据也不会在模式窗口中更新。
我是新来的反应者,我读过类似的文章,这与更改状态有关,但真的不知道在这种情况下如何应用它吗?
import React, { Component } from "react";
import Moment from "react-moment";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import ButtonToolbar from "react-bootstrap/ButtonToolbar";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";
import CardDeck from "react-bootstrap/CardDeck";
import Modal from "react-bootstrap/Modal";
import "./posts.css";
const config = require("../../config").config();
class MyVerticallyCenteredModal extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal
{...this.props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{this.props.title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<pre>{this.props.title}</pre>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
}
这是我的父组件,其中有按钮打开模式,而post.title和post.body并未在模式上进行更新。
class Posts extends Component {
constructor() {
super();
this.state = {
posts: [],
modalShow: false
};
}
componentDidMount() {
fetch(config.localhostPrefix + "/api/stories")
.then(res => res.json())
.then(posts => this.setState({ posts }));
}
render() {
let modalClose = () => this.setState({ modalShow: false });
return (
<div className="Posts">
<h2>Posts</h2>
<CardDeck>
{this.state.posts.map(post => (
<Card key={post._id}>
<Card.Body>
<Card.Title>"{post.title}"</Card.Title>
<Card.Text>
{post.body}
<ButtonToolbar>
<Button
variant="primary"
onClick={() => this.setState({ modalShow: true })}
>
Read
</Button>
<MyVerticallyCenteredModal
show={this.state.modalShow}
title={post.title}
body={post.body}
onHide={modalClose}
/>
</ButtonToolbar>
</Card.Text>
</Card.Body>
<Card.Footer>
<Container>
<Row>
<Col>
<small className="text-muted">
Created:
<Moment format=" YYYY/MM/DD hh:mm">
{post.createdAt}
</Moment>{" "}
</small>
</Col>
</Row>
<Row>
<Col>
<small className="text-muted">
Updated:
<Moment format=" YYYY/MM/DD hh:mm">
{post.updatedAt}
</Moment>
</small>
</Col>
</Row>
<Row>
<Col>
<small className="text-muted">
Author: {post.author}{" "}
</small>
</Col>
</Row>
</Container>
</Card.Footer>
</Card>
))}
</CardDeck>
</div>
);
}
}
export default Posts;
答案 0 :(得分:1)
感谢您创建沙箱。我能够解决您遇到的问题。我对您的Posts
组件进行了一些修改。您很亲近,但错过了一两件事。请在下面查看我的更改:
class Posts extends Component {
constructor() {
super();
this.state = {
posts: [
{ _id: 1, title: "title1", body: "body1", author: "author1" },
{ _id: 2, title: "title2", body: "body2", author: "author2" },
{ _id: 3, title: "title3", body: "body3", author: "author3" }
],
postId: null,
modalShow: false
};
}
modalClose = id => {
this.setState({ modalShow: !this.state.modalShow, postId: id });
};
renderModal = () => {
const { modalShow, postId, posts } = this.state;
const post = posts.find(post => (post._id === postId));
return (
<MyVerticallyCenteredModal
show={modalShow}
title={post.title}
body={post.body}
onHide={this.modalClose}
/>
);
};
render() {
return (
<div className="Posts">
<h2>Posts</h2>
<CardDeck>
{this.state.posts.map(post => (
<Card key={post._id + post.title}>
<Card.Body>
<Card.Title>"{post.title}"</Card.Title>
<Card.Text>
{post.body}
<ButtonToolbar>
<Button
variant="primary"
onClick={() => this.modalClose(post._id)}
>
Read
</Button>
</ButtonToolbar>
</Card.Text>
</Card.Body>
<Card.Footer>
<Container>
<Row>
<Col>
<small className="text-muted">
Author: {post.author}{" "}
</small>
</Col>
</Row>
</Container>
</Card.Footer>
</Card>
))}
</CardDeck>
{this.state.modalShow && this.renderModal()}
</div>
);
}
}
希望对您有帮助。
这不是完美的方法,但是可以帮助您一开始找出问题所在。