奇怪的错误this.setState在React

我在React中构建了一个相当简单的博客应用程序。我从这个React组件获得了一个非常奇怪的错误。以下是错误：奇怪的错误this.setState在React

× 
TypeError: Cannot read property 'setState' of undefined 
toggleEditing 
src/blogform.js:11 
    8 |  } 
    9 | } 
    10 | toggleEditing(){ 
> 11 |  this.setState({ 
    12 |   editing: !this.state.editing 
    13 |  }) 
    14 | }

这里是组件：

import React from 'react'; 

export default class BlogForm extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      editing: false 
     } 
    } 
    toggleEditing(){ 
     this.setState({ 
      editing: !this.state.editing 
     }) 
    } 
    render(){ 
     if(this.state.editing){ 
      return (
       <div> 
        <form onSubmit={e => { 
         e.preventDefault(); 
         this.props.onAdd(this.inputText.value) 
         }}> 
         <input ref={input => this.inputText = input} /> 
        </form> 
       </div> 
      ) 
     } 
     return (
      <div> 
       <button onClick={ this.toggleEditing }>New Post</button> 
      </div> 
     ) 

    } 
}

有什么想法？这似乎让这个.setState感到难过，但我不太清楚这个陈述有什么问题。

来源

2017-10-04 J Seabolt

建议阅读：https：//blog.andrewray.me/react-es6-autobinding-and-createclass/ –

你忘了添加绑定在您的onClick事件 –

您需要绑定constructor()中的函数，以保持正确的this值。

你可以通过添加在构造函数如下：

this.toggleEditing = this.toggleEditing.bind(this);

来源

2017-10-04 23:22:31

你有3种选择：

使用bind在constructor，如其他答复中提到。在onClick处理

this.toggleEditing = this.toggleEditing.bind(this)
使用bind。

onClick={ this.toggleEditing.bind(this) }

使用箭头函数作为回调函数。

onClick={() => this.toggleEditing() }

告诉我，如果你想对任何人的解释。

来源

2017-10-05 02:51:20 Andrew

奇怪的错误this.setState在React

回答

相关问题