Question

我得到＆＃34; TypeError：无法读取属性＆＃39; setState＆＃39;未定义＆＃34;如果我尝试在函数中调用setState（编辑或保存）。如果我声明一个箭头函数，它可以工作，但我不明白为什么？

import React, { Component } from 'react';

class Note extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editing: false
        }
    }

    edit (){
        this.setState({ editing: true })
    }

    save() {
        this.setState({ editing: false })
    }

    renderEditNote() {
        return (
            <div className="note">
                <textarea></textarea>
                <button onClick={this.save}>SAVE</button>
            </div>
        )
    }

    renderDisplayNote() {
        return (
            <div className="note">
                <p>{this.props.children}</p>
                <span>
                    <button onClick={this.edit}>Edit</button>
                    <button onClick={this.remove}>X</button>
                </span>
            </div>
        )
    }

    render() {
        return this.state.editing ? this.renderEditNote() : this.renderDisplayNote()
    }
}

export default Note

Answer 1

要使其有效，您应该

this.save.bind(this)
this.edit.bind(this)
this.remove.bind(this)

你还没有绑定它，所以你的方法edit（），save（）和remove（）中的这个不是Note类。您可以在这些方法中使用console.log（this）来理解原因

Answer 2

this和edit函数需要bind save，因此在onClick回拨时不会丢失。

例如：

 <button onClick={this.edit.bind(this)}>Edit</button>

或者您可以在constructor中执行此操作：

this.edit = this.edit.bind(this);

React-JS TypeError：无法读取属性＆＃39; setState＆＃39;未定义的

2 个答案: