javascript - React-JS- 获取数组索引

问题描述

大家好，我是反应的初学者。

我正在使用 react-js 和 noSQL 数据库（Firebase）进行开发。

我有一个集合，在该集合中我有 3 个文档，每个文档都有一个自动生成的 ID。

我正在创建一个用于添加评论的函数，并且我希望该函数按如下方式运行。

一旦您单击特定帖子的“评论”按钮，就会被重定向到具有该特定帖子的模式，并具有添加文本（评论）的输入。

我已经创建了模式和一个 map () 从同一个集合返回所有文档。但是，此地图返回所有文档，而不仅仅是我单击“评论”按钮的特定文档。有人可以帮我吗？

示例：如何在模态中仅呈现该数组的索引 0？

我的问题是：我没有办法只从该集合中返回特定文档。我的地图会立即将所有文件返回给我。

States:
constructor(props) {
    super(props);
    this.state = {    
      Posts: [],
      idDoc: [],
      openComent: false,
    }


 abrirComent() {
    if (!this.state.openComent) {
      document.addEventListener('click', this.isInPageModalComent, false);
    } else {
      document.removeEventListener('click', this.isInPageModalComent, false);
    }
      this.setState( prevState => ({
        openComent: !prevState.openComent
      }));         
    }
  // adding (node) at DOM;
  isInPageModalComent(e) {
    if(this.node) {
        const domNode = ReactDOM.findDOMNode(this.node);
        if(this.node.contains(e.target)) {
            return domNode;            
      }             
    }     
        this.abrirComent();       
  }

代码 jsx：

  {this.state.openComent && (        
    <div>
      <div className="overlay">
        <div ref={node => {this.node = node}} className="Modal-Comentario" style={{overflowY: 'scroll'}}>
          {this.state.Posts.map((itens,index) => {
            return (
            <div>
              <div className="viewPost-content" key={index}>
                {/* get background-color post */}
                <div className="viewPost-box" style={{backgroundColor: itens.colorBg} } >   
                    <p> <Moment to={itens.createdAt.toDate().toString()} /> </p> 
                    <button id="PostDelete" onClick={this.deletePost}> <ion-icon name="ellipsis-horizontal-sharp"></ion-icon> </button>                
                    <h2 className="text-post"> {itens.texto} </h2>                  
                    <div class="viewPost-icons">
                      <div style={{marginRight: '-5px', backgroundColor:'transparent'}}> <button id="bt-Posts" onClick={this.abrirComent}><ion-icon                 name="chatbox"></ion-icon></button></div>
                       <div> Comment: <input type="text" /> </div>                                             
                    </div>
                </div>                
              </div>
            </div>
            )
          })}
        </div>
      </div>
    </div>        
  )}

标签： javascriptreactjsfirebasegoogle-cloud-firestore

javascript - React-JS- 获取数组索引

问题描述

解决方案

推荐阅读