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

Answer 2

如果您在componentWillMount中调用的获取游戏的函数是异步的，则可能是您的React组件在获取数据之前就已渲染。

在获取games数组时，应尝试设置组件的状态，React将重新渲染组件。

例如

class Games extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      games: []
    }
  }

  componentWillMount() {
    db.collection("games")
      .onSnapshot(function (querySnapshot) {
        let gamesArray = []
        querySnapshot.forEach(function (doc) {
          gamesArray.push(doc.data())
        });
        this.setState({ games: gamesArray })
      })
  }

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

  render() {
    return (
      <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>
    )
  }
}

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

2 个答案: