Reactjs 按钮上未更新React.js值

Console.log打印递增的值，但按钮中的值未更新

'use strict';

const e = React.createElement;

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { val: 0 };
  }

  render() {
    return e(
      'button',
      {
        onClick: () => {
          this.state.val = this.state.val + 1
          console.log(this.state.val)
        }
      },
      'Like' + this.state.val // here Like 1 should be displayed
    );
  }
}

const domContainer = document.querySelector('#root');
ReactDOM.render(e(Counter), domContainer);

---

您必须使用

setState

来更新状态。状态更新是异步调用，所以您必须使用回调函数来检查天气存储是否更新

class Counter extends React.Component {
constructor(props) {
    super(props);
    this.state = { val: 0 };
    this.updateState = this.updateState.bind(this);
}

updateState(){
        this.setState({val : this.state.val + 1 }, function(){
            console.log(this.state.val)
        })
}

render() {
    return e(
    'button',
    {
        onClick: () => {this.updateState()
        }
    },
    'Like' + this.state.val
    );
}
}

---

您必须使用

setState

来更新状态。状态更新是异步调用，所以您必须使用回调函数来检查天气存储是否更新

class Counter extends React.Component {
constructor(props) {
    super(props);
    this.state = { val: 0 };
    this.updateState = this.updateState.bind(this);
}

updateState(){
        this.setState({val : this.state.val + 1 }, function(){
            console.log(this.state.val)
        })
}

render() {
    return e(
    'button',
    {
        onClick: () => {this.updateState()
        }
    },
    'Like' + this.state.val
    );
}
}

---

您不应该直接更新状态。始终使用

setState

this.state.val = this.state.val + 1;  // bad
this.setState((state) => ({           // good
    val: state.val + 1
}))

---

否则，React将不会“看到”更新，也不会重新渲染。

您不应直接更新状态。始终使用

setState

this.state.val = this.state.val + 1;  // bad
this.setState((state) => ({           // good
    val: state.val + 1
}))

---

否则，React将不会“看到”更新，也不会重新渲染。

您必须通过

此.setState（）函数更新React状态。否则，该组件不会重新渲染。这是反应的基础。你应该阅读更多的React文档或做一些教程

你可以读更多
 您必须通过
this.setState（）
函数更新React状态。否则，该组件不会重新渲染。这是反应的基础。你应该阅读更多的React文档或做一些教程

你可以读更多
 我在用角度思考：）我在用角度思考：）