SetState不会通过回调更新?

时间:2018-01-22 10:27:01

标签: javascript reactjs callback es6-class

我很难理解为什么文本在浏览器中不会发生变化,或者为什么它甚至不会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>
          )
        }
    }

3 个答案:

答案 0 :(得分:3)

你说错了。应该是:

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

答案 1 :(得分:1)

可能是你对es6胖箭头功能感到困惑。

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

例如:

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

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

setState()是已在React中声明的异步函数。 我们可以用它来以下列方式更新状态。

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

答案 2 :(得分:1)

以下是设置状态的方法:

  1. this.setState({VALUENAME: “值”});
  2. this.state.varluename =“value”; this.forceUpdate();