Question

请帮忙。在我的代码中出错了，但我无法理解究竟是什么，可能是语法错误，但我无法在这里找到：

import React, { Component } from 'react';

class Note extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false
    }
  }
  edit() {
    **this.setState({ editing: true })** // probaly problem here
  }
  save() {
    this.setState({ editing: false }) // here
  }
  remove() {
    alert("Removing Note") //and here
  }
  renderForm() {
    return (
      <div className="note">
        <textarea></textarea>
        <button onClick={ this.save }></button>
      </div>
    )
  }
  renderDisplay() {
    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() {
    if( this.state.editing ) {
      return this.renderForm()
    } else {
      return this.renderDisplay()
    }
  }
}

export default Note;

来自chrome的

消息是：“无法读取属性'setState'为null ” 在点击“编辑”按钮后，在线加粗this.setState({ editing: true })，

Answer 1

您的方法需要绑定到类。

constructor(props) {
  super(props);
  this.state = {
    editing: false
  }
  this.edit = this.edit.bind(this);
  this.save = this.save.bind(this);
}

还有一个实验/提议功能，通过使用箭头函数作为类方法，您可以使这些绑定无需显式绑定。 This question有更多信息。

我有一些setState问题，并有一条消息：无法读取null的属性'setState'

1 个答案: