Question

我正在检查ES6中引入的箭头功能。如果我具有功能“ addNinja”的这段代码：

 addNinja=(ninja)=>{
         ninja.id=Math.random();
         let ninjas=[...this.state.ninjas,ninja];
         this.setState({
             ninjas:ninjas
         })
        console.log(this.state);

 }

没有箭头功能，有什么办法可以写出来？

如果我考虑到这两个是相同的...

x=>x*2 

function(x){
return x*2;
}

我假设我可以像下面的代码一样重写addNinja函数，但会出现错误。

 addNinja=function(ninja){
         ninja.id=Math.random();
         let ninjas=[...this.state.ninjas,ninja]; 
         this.setState({
             ninjas:ninjas
         })
        console.log(this.state);

 }

Answer 1

function() {}语法不会将本地上下文绑定到函数，这就是this.setState或this.state.something失败的原因，因为this是由全局词法上下文定义的，并且state中不存在。如果要实现此目的，则必须手动绑定功能：

constructor(props) {
  this.addNinja = this.addNinja.bind(this);
}

addNinja=function(ninja){
         ninja.id=Math.random();
         let ninjas=[...this.state.ninjas,ninja]; 
         this.setState({
             ninjas:ninjas
         })
        console.log(this.state);
}

如何将箭头函数重写为常规函数并绑定上下文？

1 个答案: