Реагировать: Ошибка ссылки на функцию в состоянии

Question

проблема кажется простой, но я не могу понять, как ее решить:

• Кнопка добавления, объявленная в функции render, прекрасно работает
• Добавить -Кнопка, объявленная внутри самого state, не работает. Как уже упоминалось в коде, он выдаст "TypeError: Cannot read property 'state' of undefined" -Ошибку

class App extends Component {
  constructor() {
    super();

    this.state = {
      someArrayOfObjects: [{
          attr: 
             // SNIP ...
                // Doesn't work!
                // When clicked leads to this error: "TypeError: Cannot read property 'state' of undefined"
                <button onClick={this.doAction}>Add</button>
             // SNIP ...
        }]
    };

    this.doAction = this.doAction.bind(this);
  }

  // SNIP ...
  doAction() {
    console.log(this.state);
  }

  render() {
      return(
          // SNIP...
          // Works just fine
          <button onClick={this.doAction}>Add</button>
      )
  }
}

Что я пропускаю?

Answer 1

Вам необходимо связать функцию doAction до state

constructor() {
    super();

    this.doAction = this.doAction.bind(this);

    this.state = {
      someArrayOfObjects: [{
          attr: 
             // SNIP ...
                // Doesn't work!
                // When clicked leads to this error: "TypeError: Cannot read property 'state' of undefined"
                <button onClick={this.doAction}>Add</button>
             // SNIP ...
        }]
    };

  }

Редактировать : Вам необходимо связать функцию перед созданием состояния. В момент, когда вы создаете кнопку в состоянии, this.doAction ссылается на метод-прототип класса компонента. Но вы не можете передать метод в качестве обратного вызова напрямую , поэтому вам нужно связать его. Function.prototype.bind создает новую функцию , которую вы затем назначаете экземпляру, который создается в конструкторе:

this.doAction = this.doAction.bind(this);

Так что, возможно, сбивает с толку, this.doAction относится к двум различным функциям в разных точках кода. Вы хотите передать связанную версию обработчику (см. Ссылку выше, чтобы узнать, почему), поэтому вам нужно связать ее перед созданием этой кнопки.

Answer 2

Пожалуйста, проверьте код в песочнице: https://codesandbox.io/s/young-architecture-0r1tk

Здесь вы можете увидеть, что нам нужно определить метод перед добавлением его в состояние. Сначала нам нужно определить метод doAction, затем состояние, так как он используется внутри состояния.