Question

我有一个奇怪的错误，我已经尝试调试了几个小时，但是似乎无法弄清楚。本质上，除非运行调用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>

行是通过此函数呈现的，该函数映射到对象数组上：

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

现在这是奇怪的错误。除非我点击一个调用createGame的按钮，否则行不会呈现。 createGame唯一要做的是：this.setState({show: true})

菜单为：

<div classname="ui inverted segment">
  <div classname="ui large inverted pointing secondary menu">
    <button classname="active item">
      Lobby
    </button>
    <div classname="ui right inverted pointing secondary menu">
      <button classname="item menu_item" onclick={this.createGame}>
        //Have to click this button to render rows for some reason.
        <i classname="plus circle icon"></i>
        Create Game
      </button>
      <div classname="item">
        <img classname="ui mini circular image" src={this.state.photoURL}></img>
        <span classname="menu_name">{this.state.userName}</span>
      </div>
    </div>
  </div>
</div>

CreateGame也可供参考：

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

似乎由于某种原因，实际上是处于状态的show属性触发了表行，但是它没有被有条件地渲染，所以我不明白为什么触发该状态参数会导致渲染。如果我在React devtools中手动设置show: true，则表行也将呈现。

编辑：games的填充方式如下：

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

Answer 1

由于import tkinter as tk from tkinter import ttk,font from PIL import Image,ImageDraw,ImageFont root = tk.Tk() def func_image(): image = Image.open(r'E:\side_300.png') font_type_1 = ImageFont.truetype(str(combo.get()),18) draw = ImageDraw.Draw(image) draw.text((50,50),text='Hello',fill='red',font=font_type_1) image.show() fonts=list(font.families()) fonts.sort() combo = ttk.Combobox(root,value=fonts) combo.pack() btn = ttk.Button(root,text='Click Me',command=func_image) btn.pack() root.mainloop()仅在第一次渲染后被称为，因此表行最初不会被渲染。此时，游戏数组为空。

在这里将componentDidMount移到组件状态是有意义的。一旦游戏被加载，从而自动更新状态。请记住，setState通常会触发重新渲染。

games

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

1 个答案: