javascript - 将对象数组动态映射到表行

Question

我正在尝试将对象数组映射到 React 中的表行。我在这个网站上尝试了无数建议，但最后似乎什么都没有呈现。

我正在从 componentWillMount 上的数据库中获取数组数据:

         componentWillMount(){
         db.collection("games")
         .onSnapshot(function(querySnapshot){
             querySnapshot.forEach(function(doc){
                 games.push(doc.data())
             });
             console.log(games);
         })
      }

如 games 中所示，数据正在正确加载。 games 在 React 类之外声明为全局变量。

到目前为止，我已经尝试过像这样映射数组:

renderRow = () => {
    games.map(function(val, i){
        return(
            <tr>
                <td key={i}>
                    {val.name}
                </td>
            </tr>
        )
    })
}

然后像这样在表格中渲染它:

            <table className="ui inverted table">
                <thead>
                    <tr>
                        <th>Lobby name</th>
                        <th>Players</th>
                        <th>Mode</th>
                        <th>Difficulty</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                   {this.renderRow()}
                </tbody>
            </table>

但似乎没有任何渲染。我不确定我是否没有正确映射它，或者它可能在数组加载数据之前呈现表值。对此有什么想法吗？

编辑:console.log(games) 给出了这个:

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
currentPlayers: 1
difficulty: ""
gameMode: "family"
host: "###########"
name: "Testing new reset"
players:
player: "###########"
__proto__: Object
timestamp: 1550704627051
__proto__: Object
1: {currentPlayers: 1, difficulty: "heroic", gameMode: "experienced", host: "", name: "Testtest", …}
2: {currentPlayers: 1, difficulty: "veteren", gameMode: "experienced", host: "", name: "Flashpoint experts only!", …}

Answer 1

您没有在 renderRow 中返回任何内容，因此需要在 games.map 之前添加 return

改变

   renderRow = () => {
        games.map(function(val, i){
            return(
               <tr>
                  <td key={i}>
                      {val.name}
                  </td>
               </tr>
            )
        })
   }

到

  renderRow = () => {
        return games.map(function(val, i){
            return(
               <tr>
                  <td key={i}>
                      {val.name}
                  </td>
               </tr>
            )
        })
   }