reactjs - 为什么按钮没有从 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

检查一下为什么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.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>
       );
   }
 }