Question

我真的需要您的帮助！我已经编写了两个版本的react函数。一个具有传播运算符，另一个不具有且仅具有不具有版本的版本正在工作。

工作版本：

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

正如每个人在问题中提到的那样，您的传播实施没有任何问题。请为该确认找到添加的代码段。

主要检查 检查您的编译器是否支持带有React的ES6。如果不;尝试为项目添加一个babel之类的项目。 Check this discussion for more info

二次检查 提到您的错误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>

ReactJS项目中ES6传播运算符的问题

1 个答案: