2017-07-29 43 views
1

我检查了这个错误的stackoverflow和唯一的结果,我已经得到的是,功能需要绑定与此。 但我已经在我的代码中这样做了,错误仍然存​​在。 我不知道为什么会发生这种情况。 上CodePen完整的代码和下面反应未捕获TypeError:_this2.setState不是一个函数

class MainComponent extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.setOperand = this.setOperand.bind(this); 
    this.calculate = this.calculate.bind(this); 
    this.updateValue = this.updateValue.bind(this); 
    this.state = { 
     currentValue: 0, 
     secondValue: 0, 
     operand: null, 
     isNewNum: false 
    }; 
    } 

    setOperand = (value) => { 
    //set data from input 
    }; 

    calculate =() => { 
    //math stuff 
    this.setState = ({ 
     currentValue: result, 
     isNewNum: false 
    }); 
    }; 

    updateValue = (value) => { 
    if(!this.state.isNewNum){ //first Number 
     var newNum = ""; 
     //set values 
     this.setState({ 
     currentValue: newNum 
     }); 
    } else { 
     var newNum2 = ""; 
     //set values 
     this.setState({ 
     secondValue: newNum2 
     }); 
    } 
    }; 

    render(){ 
    return(
     <div id="main"> 
     <p>isNewNum = {`${this.state.isNewNum}`}</p> 

     {this.state.isNewNum ? <Display display ={this.state.secondValue}/> : <Display display ={this.state.currentValue}/>} 
     <div> 
      <Buttons value={1} onClick={this.updateValue}/> 
      ... 
      <Buttons value={'+'} onClick={this.setOperand}/> 
     </div> 
     </div> 
    ) 
    }; 
} 


ReactDOM.render(<MainComponent />, document.getElementById("root")); 

回答

2

呃。

您实际上在calculate方法中创建了您的实例的setState属性的本地副本,并在开始本地解析时将原始链断开为React.Component

这是错误:

this.setState = ({ 
    currentValue: result, 
    isNewNum: false 
}); 

额外=是赋值。任何后续调用setState将失败

+0

但是'setState'不是一个变量,你可以给它赋值... –

+0

这就是整个观点。 Prototype链找到一个ownProperty'setState',它不再是一个函数 –

+1

所以换句话说,我意外地分配了setState,这就是导致问题的原因。并且所有对它的调用都不会起作用,从而导致它不再是一个函数。非常感谢! – Eric

0

缩短的副本不需要重新绑定在构造为箭头的功能回调继承封装类的情况下(在这种情况下,组件)。

+0

不幸的是,情况并非如此。 –

+0

我重印了他们,因为我认为这将解决问题,但它不起作用绑定或解除绑定。有谁知道为什么会发生这种情况?我只是想练习和学习React – Eric

相关问题