React.js TypeError: невозможно установить для свойства setState значение undefined

import React, { Component } from 'react';

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

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

  remove() {
    this.props.deleteFromBoard(this.props.index);
  }

  save() {
    this.props.updateCommentText(this.refs.newText.value, this.props.index);
    this.setState = { editing: false }
  }

  renderNormal() {
    return (
      <div className="commentContainer">
        <div className="commentText>">{this.props.children}</div>
        <button onClick={this.edit} className="button-primary">Edit
        </button>
        <button onClick={this.remove} className="button-danger">Remove
        </button>
      </div>
    );
  }

  renderForm() {
    return (
      <div className="commentContainer">
        <textarea ref="newText" defaultValue={this.props.children}>
    </textarea>
        <button onClick={this.save} className="button-success">Save
        </button>
      </div>
    );
  }

  render() {
    if (this.state.editing)
      return this.renderForm;
    else
      return this.renderNormal;
  }
}

export default Comment;

Когда я пытаюсь выполнить этот код, он говорит, что «Функции недействительны в качестве дочерних React. Это может произойти, если вы вернете компонент вместо отрисовки. Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее. "Я также пытался заключить оператор return в div, но он все равно дает ту же ошибку. Я новичок в React.js, поэтому может ли кто-нибудь указать на какую-либо документацию или объяснить причину этой ошибки и как ее решить? Я также рассмотрел похожие вопросы, но не смог найти что-то, что соответствует моим требованиям.

РЕДАКТИРОВАТЬ: я отредактировал свой рендер, чтобы он выглядел так

render() {
if(this.state.editing)
  return this.renderForm();
else
  return this.renderNormal();
}

который решил эту проблему, но теперь, когда я нажимаю на Edit, появляется следующая ошибка:

TypeError: невозможно установить для свойства setState значение undefined

РЕДАКТИРОВАТЬ: это было решено путем внесения следующих изменений в конструктор

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

reactjs setstate es6-class
person G V Sandeep    schedule 06.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

исправление:

  1. Вам не хватает вызова функции.

  2. if else используется неправильно. Вместо этого вы можете использовать тернарный оператор.

    render() { { this.state.editing ? this.renderForm() : this.renderNormal() } }

ИЛИ используя if - else.

render() {

  let MyComp = "";
  if (this.state.editing) 
    MyComp = this.renderForm;
  else 
    MyComp = this.renderNormal;
  }

    return (<MyComp/>);
}
  1. В функциях edit и save вы используете this. Но не привязываете this к области действия компонента.

Сделайте this привязку Либо:

в конструкторе:

constructor(){

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

Или используя стрелочную функцию:

edit = () = {
  //code
}

save = () => {

  //code
}
person RIYAJ KHAN    schedule 06.03.2018
comment
Исправлено. Спасибо. Теперь выдает следующую ошибку: Uncaught TypeError: невозможно установить свойство setState на undefined. - person G V Sandeep; 06.03.2018
comment
@GVSandeep контрольная точка 3, вам нужно привязать это к области компонента - person RIYAJ KHAN; 06.03.2018