При нажатии кнопки в режиме реакции журнал консоли показывает результат, но страница не отображается.

Question

Я новичок в реакции и Интернете. У меня проблема, когда при вызове функциональной консоли это отображается, но я не могу показать ее на своей странице.

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