SetState 不会通过回调更新？

Question

我很难理解为什么浏览器中的文本不会改变，或者为什么它甚至不会 console.log 新状态。我只是想通过单击来更改文本。

class Komponentti extends React.Component{
      constructor(props){
        super(props)
        this.state = {teksti: "Hello"}
        this.handleClick = this.handleClick.bind(this);
      }
      handleClick(){
        this.setState = ({teksti: "Mello"}), function(){
          console.log(this.state.teksti);
        }
      }  
      render(){
          return(
            <h1 onClick={this.handleClick}>{this.state.teksti}</h1>
          )
        }
    }

Answer 1

你说错了。应该是：

handleClick() {
 this.setState({teksti: "Mello"}), () => {
    console.log(this.state.teksti);
  }
}

Answer 2

可能你对 es6 胖箭头函数感到困惑。

在 ES6 中，我们可以使用粗箭头符号来声明函数，以将词法 this 传递给您声明的函数。

例如：

const example = () => {
    // Something interesting
}

但我们将该函数称为example()。

但是setState() 是一个已经在 React 中声明的异步函数。 我们可以通过以下方式使用它来更新状态。

handleClick(){
 this.setState({teksti: "Mello"}), () => {
    console.log(this.state.teksti);
  }
} 

Answer 3

以下是设置状态的方法：

1. this.setState({valuename:"value"});
2. this.state.varluename = "值"; this.forceUpdate();