为什么按钮不从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

[Check this关于this.render()实际上没有触发重新渲染的原因。观察此情况的更好方法是将变量移至状态，然后调用this.setState()

Answer 3

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.myValue%2) {
     case 0:
       return(
       <button className = "myButton" onClick={() => this.buttonIsClicked()}>X</button>
       );
     case 1:
       return(
       <button className = "myButton" onClick={() => this.buttonIsClicked()}>Y</button>
       );
   }
 }