Firebase JavaScript - 數組中的映射值僅顯示最后一項

Question

我試圖簡單地為用戶呈現我的數據庫中的每個標簽。 只有最后一個標簽正在為用戶呈現 (tag3)。 控制台讀取如下內容：

安慰：

...
Room.js:376 Tags just before .map: undefined
Room.js:376 Tags just before .map: undefined
Room.js:376 Tags just before .map: undefined
Room.js:376 Tags just before .map: undefined
Room.js:376 Tags just before .map: tag1
Room.js:376 Tags just before .map:  tag2
Room.js:376 Tags just before .map:  tag3

數據庫結構：

>questions
    >ID1234567890
          >body
          >title
          >tags
              >0
                 >tag: tag1
              >1
                 >tag: tag2
              >2
                 >tag: tag3
              >tagCount: 3
          >status

我已經嘗試了幾種這樣做的方法，比如制作一個<Tag>組件，傳遞值並通過它呈現它們，但無法正確呈現標簽。 我覺得我很接近，因為控制台記錄了正確的值，但渲染不起作用。 如何讓每個標簽呈現？

房間.js：

<b>Tags:</b>
{console.log("Tags just before .map: " + this.state.questionTags)}
{
  this.state.questionTags &&
  (

    this.state.questionTags.map((tag) => {
      return (
        <div>
        {tag}
        </div>
    )
    })
  )
} 

設置問題標簽：

//Grab tag data
fire
  .database()
  .ref('/questions/' + this.state.questionId + '/tags/')
  .once('value')
  .then(
    function(snapshot) {
      var tagCount = snapshot.val().tagCount;
      this.setState({
        tagCount: tagCount
      });
      var i = 0;
      for (i = 0; i < tagCount; i++) {
        fire
          .database()
          .ref('/questions/' + this.state.questionId + '/tags/' + i)
          .once('value')
          .then(
            function(snapshot) {
              this.setState({
                questionTags: [snapshot.val().tag]
              });
            }.bind(this)
          );
      }
    }.bind(this)
  );

Answer 1

您需要為地圖內的 div 元素設置唯一鍵。 由於我不確定您的數據是什么樣的，或者它包含每個對象的唯一 id，所以我使用 map 中的索引作為 div 元素的鍵。

每當您在循環內渲染 jsx 元素時，您都需要為循環內的頂部 jsx 元素設置唯一鍵，因此在您的情況下，頂部 jsx 元素是 div 否則在您的情況下發生的情況是，由於您沒有設置唯一鍵，您將只得到最后呈現的 jsx 元素。

改變

this.state.questionTags.map((tag) => {
        return (
             <div>
                 {tag}
             </div>
        )
   })

到

this.state.questionTags.map((tag, index) => {
        return (
             <div key={"key-"+index}
                  {tag}
             </div>
        )
   })

編輯：

在 for 循環中，您正在為每次迭代執行 setState，因此您只獲得最后一個標簽。 您應該將所有標簽推入一個數組，並在 for 循環之后將這些標簽數組設置為狀態。 嘗試使用以下更新的代碼

      //Grab tag data
       fire.database().ref('/questions/' + this.state.questionId + '/tags/').once('value').then(function(snapshot) { 
         var tagCount = snapshot.val().tagCount;
         this.setState({
            tagCount: tagCount,
         })
        var i = 0;
        const tags = [];
        for(i = 0; i < tagCount; i++){
    fire.database().ref('/questions/'+this.state.questionId+'/tags/'+i).once('value').then(function(snapshot) { 
            tags.push(snapshot.val().tag);
          }.bind(this));
        }
        this.setState({
                questionTags: tags
            })
      }.bind(this));

Answer 2

帶箭頭功能：

fire.database().ref('/questions/' + this.state.questionId + '/tags/').once('value').then(snapshot => { 
     var tagCount = snapshot.val().tagCount;
     this.setState({
        tagCount
     })
    var i = 0;
    let tags = [];
    for(i = 0; i < tagCount; i++){
fire.database().ref('/questions/'+this.state.questionId+'/tags/'+i).once('value').then(snapshot => { 
        tags.push({ tag: snapshot.val().tag });
      });
    }
    this.setState({
            questionTags: tags
        })
  });