Почему кнопка не меняется с x на y в реакции?

Question

Я пытаюсь сделать кнопку, которая переключает между x и y. Однако следующий код не работает. Почему это не работает? Извините, если это простое решение, я новичок в реакции.

Прямо сейчас появляется только кнопка с надписью X, и когда я пытаюсь ее щелкнуть, ничего не меняется.

  constructor(props) {
    super(props);
    this.myValue = 2
  }

  buttonIsClicked() {
    this.myValue+=1
    this.render()
  }

  render() {
    switch(this.myValue%2) {
      case 0:
        return(
        <button className = "myButton" onClick={() => this.buttonIsClicked()}>X</button>
        );
      case 1:
        return(
        <button className = "myButton" onClick={() => this.buttonIsClicked()}>Y</button>
        );
    }
  }

Answer 1

В React вы не можете использовать свойства объекта в качестве состояния компонента.

  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  buttonIsClicked() {
    this.setState({ counter: this.state.counter + 1 });
  }

  render() {
    switch(this.state.counter%2) {
      case 0:
        return(
        <button className = "myButton" onClick={() => this.buttonIsClicked()}>X</button>
        );
      case 1:
        return(
        <button className = "myButton" onClick={() => this.buttonIsClicked()}>Y</button>
        );
    }
  }

Кроме того, вы не можете напрямую вызывать методы жизненного цикла (например, рендеринг).

Если бы я был вами, Я бы начал с чтения документации React, чтобы избежать подобных ошибок.

Answer 2

React использует состояние для определения изменений в своих компонентах. Обратитесь к официальной документации, чтобы узнать больше о жизненном цикле и управлении состоянием: https://reactjs.org/docs/state-and-lifecycle.html

 constructor(props) {
   super(props);
   // init the state
   this.state = { myValue: 2 };
 }

 buttonIsClicked() {
   // accessing state
   const lastValue = this.state.myValue;
   // updating state which will trigger rendering
   this.setState({ myValue: lastValue + 1 });
 }

 render() {
   switch(this.state.myValue%2) {
     case 0:
       return(
       <button className = "myButton" onClick={() => this.buttonIsClicked()}>X</button>
       );
     case 1:
       return(
       <button className = "myButton" onClick={() => this.buttonIsClicked()}>Y</button>
       );
   }
 }

Answer 3

Отметьте этот , чтобы узнать, почему this.render() на самом деле не запускает повторный рендеринг. Лучший способ увидеть это в действии - переместить переменную в состояние, а затем вызвать this.setState()