Javascript React-表行仅在不相关的函数调用后呈现

我有一个奇怪的错误，我已经试着调试了几个小时了，但似乎无法解决它。实际上，除非运行调用

setState

的函数，否则我的表行不会呈现

我的表格格式如下：

<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()} //Table rows
  </tbody>
</table>

componentDidMount(){
             //DB listner, gets all games on component mount, and all new games. 
             db.collection("games")
             .onSnapshot(function(querySnapshot){
                 querySnapshot.forEach(function(doc){
                     games.push(doc.data())
                 });
                 console.log(games);
             });
}

CreateGame供参考：

createGame = () => {
   this.setState({show: true})
};

似乎是状态中的

show

属性出于某种原因触发了表行，但是它没有被有条件地呈现，所以我不理解为什么触发状态参数会导致呈现。如果在React devtools中手动设置

show:true

，表行也会呈现

编辑：

游戏

正在按如下方式填充：

<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()} //Table rows
  </tbody>
</table>

componentDidMount(){
             //DB listner, gets all games on component mount, and all new games. 
             db.collection("games")
             .onSnapshot(function(querySnapshot){
                 querySnapshot.forEach(function(doc){
                     games.push(doc.data())
                 });
                 console.log(games);
             });
}

---

由于只有在第一次呈现之后才调用

componentDidMount

，因此最初不会呈现表行。此时游戏数组为空

将

游戏

移动到组件状态是有意义的。从而在游戏加载后自动更新状态。请记住，设置状态通常会触发重新渲染

componentDidMount(){

  //DB listner, gets all games on component mount, and all new games. 
  db.collection("games").onSnapshot(function(querySnapshot) {

    const loadedGames = querySnapshot.map(function(doc) {
      return doc.data();
    });

    // update the state
    this.setState({ games: loadedGames });

  });

}

---

我们需要更多的代码。例如，renderRow函数如何访问游戏数组？它被传进来了吗？它在范围内如何？我认为它没有渲染，因为renderRow在第一个渲染周期内没有完成。游戏是如何设置的。也许它开始时是一个空数组，然后在单击按钮并调用createGame函数时填充。旁注：不要将索引用作元素键。索引可能会因插入、删除或排序而更改，从而导致奇怪的呈现问题。为什么不在从db检索后将结果设置为状态，并使用该状态来呈现行呢？谢谢您的建议。这似乎有效，但我该如何绘制这个.state.games？在我的renderRow func中用this.state.games替换游戏似乎不起作用。这可能是一个绑定问题。检查您是否确实拥有此的权限以及对状态对象的访问权限。通常只要添加几个

console.log

语句就可以了。