Javascript 如何在React Js中使用Bootstrap model inside map函数来渲染个性化元素？

因此，我尝试使用react js创建一个博客应用程序。我正在使用map函数显示所有提要（我使用axios获取）。我将这些提要存储在状态中，并将它们作为道具传递。 现在的问题是：我试图在map函数中使用bootstrap modals来显示单击按钮时博客的内容。我将模态存储在单独的组件中。但是，当我点击按钮时，由于map函数，它正在迭代所有元素，并显示最后输入的数据（博客内容），该数据针对modal内页面中的每个元素

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

---

如何使用modal来呈现单个提要？

这是因为当您单击按钮时，循环已经运行，而当您单击按钮时，它呈现最后一项数据。更好的方法是不在每个循环方法上渲染模态，而是在

Feed

Level组件上渲染

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

类提要扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal：错，
modalId:null，
数据：{}
};
}
showModal=（e，索引）=>{
this.setState（{showModal:true，modalId:index}）；
控制台日志（“索引：”+索引）；
};
hideModal=（e，索引）=>{
this.setState（{showmodel:false，modalId:index}）；
控制台日志（“索引：”+索引）；
};
显示（e）{
console.log（“函数：+e.\U id”）；
}
展示物品（e）{}
让modalClose=（）=>this.setState（{showmodel:false}）；//更改
render（）{
返回(

{this.props.feedData.map（feed=>(

此.setState（{showmodel:
true，数据：feed}}//change
>
{feed.title}
by-{feed.author}

{feed.subTitle}

已发布{feed.date}
向上投票{“}
注释{'}
报告{“}


{this.disp（feed）}


))}

);
}
}

注意：切勿在渲染内部设置状态。它会使你的应用程序崩溃。（这里是modalClose函数）

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.

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