Html 按下react中的按钮时，控制台日志显示结果，但页面不显示

我是新的反应和网络。我在调用函数控制台时遇到问题，但我无法在我的页面中显示它

            usePriest = (evt, id) => {
            const num = 3;

            const { rear,bottom2,bottom3,bottom,player1, player2, player3, player4, mycards } = this.state;

            var whichPlayer;
            switch(num){
              case 1:
                whichPlayer = player1[0];
                rear[1]=whichPlayer;
                rear[0]=card6;
                break;
              case 2:

                whichPlayer = player2[0];
                bottom[1]=whichPlayer;
                bottom[0]=card6;
                break;
              case 3:
                whichPlayer = player3[0];
                bottom2[1]=whichPlayer;
                bottom2[0]=card6;
                break;
              case 4:
                whichPlayer = player4[0];
                bottom3[1]=whichPlayer;
                bottom3[0]=card6;
                break;
            }
                // bottom[1]=whichPlayer;
                // bottom[0]=card6;
                // console.log(bottom);

          }

我在这里调用我的函数

else if (mycards[0]==="/static/media/priest.ae71698d.jpg") {
          return ( <div>
            <button className="button_card1_use" onClick={(evt) => this.usePriest(evt, 1)}>Use</button>
                  <button className="button_card1_discard">Discard</button>
            <div className="about1"><p>Priest</p>
Player is allowed to see another player's hand.         </div></div>
        )
    } 

else if（mycards[0]==“/static/media/price.ae71698d.jpg”）{
报税表（
this.useprist（evt，1）}>Use
丢弃
牧师

玩家可以看到其他玩家的手。
)
} 

---

我应该在函数中返回什么或执行什么操作才能在页面上显示它。

您只需要在函数末尾调用一个

setState

，以反映更改-：

usePriest = (evt, id) => {
        const num = 3;

        // your old code
        this.setState({ rear,bottom2,bottom3,bottom,player1, player2, player3, player4, mycards })

      }

实际上，在JS中，事物是通过引用进行复制的，因此我们实际上是在直接改变状态。对于相同的情况，这是一个更好的解决方案-：

usePriest = (evt, id) => {
        const num = 3;

        const { rear,bottom2,bottom3,bottom,player1, player2, player3, player4, mycards } = this.state;

        var whichPlayer;
        switch(num){
          case 1:
            this.setState({whichPlayer: player1[0], rear: [...rear, 0: card6, 1: whichPlayer]});
            break;
          case 2:
            this.setState({whichPlayer: player2[0], bottom: [...bottom, 0: card6, 1: whichPlayer]});
            break;
          case 3:
            this.setState({whichPlayer: player3[0], bottom2: [...bottom2, 0: card6, 1: whichPlayer]});
            break;
          case 4:
            this.setState({whichPlayer: player4[0], bottom3: [...bottom3, 0: card6, 1: whichPlayer]});
            break;
        }
   }   

---

您不能改变状态并期望react检测到状态已更改，因为react使用

prefState！==当前状态

我想看一看反应状态。您可以将所需的值存储在

react状态

，然后通过调用

this.state.yourvar

@Michael yes sir将其显示在页面上。我是这样做的，但是它没有显示任何内容。好吧，我的坏消息，我只是没有在代码中的任何地方看到它。仍然会变异状态：

rear[1]=whichPlayer

如果OP使用纯组件和

状态。rear

被传递给它，那么该组件将不会渲染。你们永远不应该改变状态。是的，但他似乎是新的反应。将编辑答案以获得更优化的解决方案。谢谢@hmr这是什么意思变异？事实上，我想知道它的副作用，未来会发生什么