如何在React Js中使用Bootstrap Modal来映射函数来渲染单个元素？

Question

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

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，该组件具有从fetch 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.

如何使用模态渲染单个Feed？

Answer 1

它是因为当你点击循环时已经运行了当你点击按钮它渲染最后一项数据。 更好的方法是不要在每个循环方法上渲染模态，而应该在Feed Level Component上渲染。

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

注意 ：从不在渲染中设置setState。 它会让你的应用程序崩溃。（这里是modalClose函数）