使用setState（React）更改对象数组中一个对象的属性

Question

我的状态是代表书籍的一组对象。 每本书都有许多属性，包括“架子”属性和“ id”。 根据书架属性的设置显示书籍：currentlyReading，wantToRead或read。

每本书都有一个下拉选择，允许用户更改书架设置。 我设置了一个事件处理程序，该事件处理程序传递新书架和书本ID。

通过setState调用，我尝试1）使用传入的id属性隔离特定的书，然后2）将该书的书架属性更改为用户选择的新书，然后3）使用新书架，这会将书放到新书架中。 我通过在数组上调用filter来隔离正确的书，但是在那之后我迷路了。 代码如下（首先是JS，然后是带有下拉列表的JSX）。 我如何做到这一点，我尝试了几种方法，包括传递prevState。 下面的最新示例来自我尝试从reactTraining模仿的示例，但它给了我一个语法错误：setState调用中出现了意外的令牌。

constructor() {
    super();
    this.state = {
        books: []
    }
};

componentDidMount() {
    getAll().then((books) => {
        this.setState({ books })
    })
}

onSelectChange = (e) => {
    const id = e.target.name
    const newShelf = e.target.value
    console.log(id, newShelf)
    let changeShelf = this.state.books.filter((book) => { return 
        book.id === id})

    this.setState({
        changeShelf[0].shelf: changeShelf[0].newShelf
    })
}

<li key={book.id}>
    <div className="book">
        <div className="book-top">
            <div className="book-cover" style={{ width: 128, height: 
                193, backgroundImage: `url("${ 
                book.imageLinks.thumbnail 
                }")` }}>
            </div>
            <div className="book-shelf-changer">
                <select name={book.id} onChange={onSelect}>
                    <option value="none" disabled>Move to...</option>
                    <option value="currentlyReading">Currently 
                        Reading</option>
                    <option value="wantToRead">Want to Read</option>
                    <option value="read">Read</option>
                    <option value="none">None</option>
                 </select>
            </div>
        </div>
        <div className="book-title">{book.title}</div>
        <div className="book-authors">{book.authors}</div>
    </div>
</li>

Answer 1

您可以循环浏览书籍。 当找到带有ID的书时，只需更改书架属性：

onSelectChange = (e) => {
    const id = e.target.name
    const newShelf = e.target.value
    console.log(id, newShelf)
    const books = this.state.books.slice(); // Create local copy to change.
    books.forEach((book) => {
      if (book.id === id) {
        book.shelf = newShelf;
      }
    });
    this.setState({ books });
}