Question

因此，我正在尝试使用react js制作博客应用程序。我正在使用地图功能来显示所有提要（我使用axios来获取）。我将这些提要存储在状态中，并将其作为道具传递。现在的问题是：单击按钮时，我试图在地图功能中使用引导模式来显示博客的内容。我将模式存储在单独的组件中。但是，当我单击该按钮时，由于具有map功能，它会遍历所有元素，并显示模式内页面中每个元素的最后输入的数据（博客内容）。

Feed.jsx：

class Feed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      modalId: null
    };
  }

  showModal = (e, index) => {
    this.setState({ showModal: true, modalId: index });
    console.log("Index: " + index);
  };

  hideModal = (e, index) => {
    this.setState({ showModal: false, modalId: index });
    console.log("Index: " + index);
  };

  disp(e) {
    console.log("function: " + e._id);
  }

  showArticle(e) {}

  render() {
    let modalClose = () => this.setState({ showModal: false });
    return (
      <div className="container-fluid">
        <ul className="list-group" key={this.props.feedData.id}>
          {this.props.feedData.map(feed => (
            <li
              className="list-group-item"
              style={styles.container}
              key={feed.id}
            >
              <div className="container">
                <div className="col-md-12">
                  <button
                    type="button"
                    className="btn btn-default"
                    onClick={() => this.setState({ showModal: true })}
                  >
                    <h3 style={styles.heading}>{feed.title} </h3>
                  </button>
                  <p>by - {feed.author}</p>
                  <p>{feed.subTitle}</p>
                  <div>
                    <span className="badge">Posted {feed.date}</span>
                    <div className="pull-right">
                      <button className="btn btn-primary">Upvote</button>{" "}
                      <button className="btn btn-info">Comment</button>{" "}
                      <button className="btn btn-danger">Report</button>{" "}
                    </div>
                  </div>
                  <br />

                  <Article

                    show={this.state.showModal}
                    onHide={modalClose}
                    data={feed}
                  />
                  {this.disp(feed)}
                </div>
                <hr />
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Article.jsx

class Article extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    console.log("Data from Article.jsx: " + this.props.data.title);
    return (
      <div className="article">
        <Modal
          {...this.props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              {this.props.data.title}
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4> {this.props.data.subTitle} </h4>
            <p>{this.props.data.content}</p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.onHide}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

我正在从一个父组件获取feedData，该组件的提要以获取API的状态存储。控制台：

The development server has disconnected.
Refresh the page if necessary. webpackHotDevClient.js:65
function: 5cf24b53431f5f089496354b Feed.jsx:25
function: 5cf7a4b26332500efc0d1919 Feed.jsx:25
function: 5cfb558d9198991ea00a9452 Feed.jsx:25
Data from Article.jsx: Liberalism and Loyality Article.jsx:10
Data from Article.jsx: Made my first website Article.jsx:10
Data from Article.jsx: IOT project for tracking heart beat and monitoring data on phone.

如何使用模式渲染单个提要？

Answer 1

这是因为当您单击循环时，当您单击按钮时它已经运行了，它呈现最后一个项目数据。更好的方法是不要在每个循环方法上都呈现模态，而应在Feed级别组件上呈现。

class Feed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      modalId: null,
      data:{}
    };
  }

  showModal = (e, index) => {
    this.setState({ showModal: true, modalId: index });
    console.log("Index: " + index);
  };

  hideModal = (e, index) => {
    this.setState({ showModal: false, modalId: index });
    console.log("Index: " + index);
  };

  disp(e) {
    console.log("function: " + e._id);
  }

  showArticle(e) {}
let modalClose = () => this.setState({ showModal: false }); //change

  render() {

    return (
      <div className="container-fluid">
        <ul className="list-group" key={this.props.feedData.id}>
          {this.props.feedData.map(feed => (
            <li
              className="list-group-item"
              style={styles.container}
              key={feed.id}
            >
              <div className="container">
                <div className="col-md-12">
                  <button
                    type="button"
                    className="btn btn-default"
                    onClick={() => this.setState({ showModal: 
                 true,data:feed })} //change
                  >
                    <h3 style={styles.heading}>{feed.title} </h3>
                  </button>
                  <p>by - {feed.author}</p>
                  <p>{feed.subTitle}</p>
                  <div>
                    <span className="badge">Posted {feed.date}</span>
                    <div className="pull-right">
                      <button className="btn btn-primary">Upvote</button>{" "}
                      <button className="btn btn-info">Comment</button>{" "}
                      <button className="btn btn-danger">Report</button>{" "}
                    </div>
                  </div>
                  <br />


                  {this.disp(feed)}
                </div>
                <hr />
              </div>
            </li>
          ))}
        </ul>
               <Article
                    show={this.state.showModal}
                    onHide={this.modalClose}
                    data={this.state.data}
                  />
      </div>
    );
  }
}

注意：永远不要在渲染器内设置状态。它将使您的应用程序崩溃。（此处为modalClose函数）

如何在React Js中的地图函数内部使用Bootstrap Modal来呈现单个元素？

1 个答案: