在反应中按下按钮时，控制台日志显示结果但页面不显示

Question

我是 react 和 web 新手。调用函数控制台时出现问题，但无法在我的页面中显示。

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

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

Answer 1

您只需要在函数末尾调用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;
        }
   }