Проблемы с оператором распространения ES6 в проекте ReactJS

Question

Мне очень нужна твоя помощь! Я написал две версии функций реагирования. Один с оператором распространения, другой без и только версия без работает.

Рабочая версия:

onAddBook() {
  var updatedBooks = this.state.books;
  var finalBook = {
    title: this.state.title
  };
  updatedBooks.push(finalBooks);
  this.setState({
    books: updatedBooks
  });
}

Не работает:

var finalBook = {
  title: this.state.title
}
this.setState({
  books: [...this.state.books, finalBook]
});

Answer 1

Как все упоминали в вопросе, в вашей реализации распространения нет ничего плохого. Пожалуйста, найдите добавленный фрагмент для этого подтверждения.

Первичная проверка Проверьте, поддерживает ли ваш транспортер ES6 с React. Если не; попробуйте добавить один для вашего проекта, как babel. Проверьте это обсуждение для получения дополнительной информации

Вторичная проверка Ссылка на вашу ошибку cannot read property title of undefined может быть связана с вашим this.state.title в коде. Либо title не определено в вашем состоянии, либо еще не инициализировано к моменту вызова this.state.title. Поэтому, пожалуйста, посмотрите на точную строку кода, где она ломается, чтобы отследить ошибку

// Without the spread operator
const updatedBooks = [{ title: 'Hi' }, { title: 'Hello' }]
const finalBook = {
  title: 'How'
}
updatedBooks.push(finalBook)
console.log('result without spread:', updatedBooks)


// With Spread operator
const books = [{ title: 'Hi' }, { title: 'Hello' }]
const finalBook2 = {
  title: 'How'
}
console.log('result with spread',[...books, finalBook2])

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>