Reactjs React引导模式不呈现更新的数据

当我运行下面的代码并单击“读取”按钮时，数据不会在模式窗口中更新，即使我渲染了几个不同的组件

我是一个新的反应者，我读过类似的帖子，它与改变状态有关，但我真的不知道如何在这种情况下应用它

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>
    );
  }
}

import React，{Component}来自“React”；
从“反应力矩”导入力矩；
从“反应引导/卡”导入卡；
从“反应引导/按钮”导入按钮；
从“react bootstrap/ButtonToolbar”导入ButtonToolbar；
从“反应引导/行”导入行；
从“反应引导/Col”导入Col；
从“react引导/容器”导入容器；
从“react引导/CardDeck”导入CardDeck；
从“反应引导/模式”导入模式；
导入“/posts.css”；
const config=require（“../../config”）.config（）；
类MyVerticallyCenter扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.title}
{this.props.title}
接近
);
}
}

这是我的父组件，其中我有按钮打开模式，post.title和post.body没有在模式上更新

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>
    );
  }
}

class Posts扩展组件{
构造函数（）{
超级（）；
此.state={
员额：[]，
modalShow：错误
};
}
componentDidMount（）{
获取（config.localhostPrefix+“/api/stories”）
.then（res=>res.json（））
.then（posts=>this.setState（{posts}））；
}
render（）{
让modalClose=（）=>this.setState（{modalShow:false}）；
返回(
帖子
{this.state.posts.map（post=>(
“{post.title}”
{post.body}
this.setState（{modalShow:true}）
>
阅读
创建：
{post.createdAt}
{" "}
更新：
{post.updatedAt}
作者：{post.Author}{”“}
))}
);
}
}
导出默认职位；

感谢您创建沙箱。我能解决你的问题。我稍微修改了你的

帖子

组件。你很接近，但有一两件事你错过了。请参阅下面我的更改：

class Posts扩展组件{
构造函数（）{
超级（）；
此.state={
职位：[
{id:1，标题：“title1”，正文：“body1”，作者：“author1”}，
{u id:2，标题：“title2”，正文：“body2”，作者：“author2”}，
{u id:3，标题：“title3”，正文：“body3”，作者：“author3”}
],
posted:null，
modalShow：错误
};
}
modalClose=id=>{
this.setState（{modalShow:！this.state.modalShow，postId:id}）；
};
renderModal=（）=>{
const{modalShow，postId，posts}=this.state；
const post=posts.find（post=>（post.\u id===postId））；
返回(
);
};
render（）{
返回(
帖子
{this.state.posts.map（post=>(
“{post.title}”
{post.body}
this.modalClose（post.\u id）}
>
阅读
作者：{post.Author}{”“}
))}
{this.state.modalShow&&this.renderModal（）}
);
}
}

我希望这对你有帮助

它不是完美的，但可以帮助您找出最初的错误

---

感谢您创建沙盒。我能解决你的问题。我稍微修改了你的

帖子

组件。你很接近，但有一两件事你错过了。请参阅下面我的更改：

class Posts扩展组件{
构造函数（）{
超级（）；
此.state={
职位：[
{id:1，标题：“title1”，正文：“body1”，作者：“author1”}，
{u id:2，标题：“title2”，正文：“body2”，作者：“author2”}，
{u id:3，标题：“title3”，正文：“body3”，作者：“author3”}
],
posted:null，
modalShow：错误
};
}
modalClose=id=>{
this.setState（{modalShow:！this.state.modalShow，postId:id}）；
};
renderModal=（）=>{
const{modalShow，postId，posts}=this.state；
const post=posts.find（post=>（post.\u id===postId））；
返回(
);
};
render（）{
返回(
帖子
{this.state.posts.map（post=>(
“{post.title}
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>
    );
  }
}