Question

我正在React中构建一个相当简单的博客应用程序。我从这个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>
        )

    }
}

有什么想法？它似乎被this.setState打乱了，但是我不能完全看出这个语句有什么问题。

Answer 1

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

您可以通过在构造函数中添加以下内容来实现：

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

Answer 2

您有3个选项：

在bind中使用constructor，如其他答案中所述。

this.toggleEditing = this.toggleEditing.bind(this)
在bind处理程序中使用onClick。

onClick={ this.toggleEditing.bind(this) }
使用箭头函数作为回调函数。

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

告诉我你是否想要解释其中任何一个。

React中的奇怪错误this.setState

2 个答案: