[英]Change a property of one object in an array of objects using setState (React)
My state is an array of objects representing books. 我的状态是代表书籍的一组对象。 Each book has a number of properties, including a "shelf" property, and an "id". 每本书都有许多属性,包括“架子”属性和“ id”。 The books are displayed according to the shelf property's setting: currentlyReading, wantToRead, or read. 根据书架属性的设置显示书籍:currentlyReading,wantToRead或read。
Each book has a drop-down select that to allow the user to change the shelf setting. 每本书都有一个下拉选择,允许用户更改书架设置。 I have an event handler set up, which passes the new shelf and the book id. 我设置了一个事件处理程序,该事件处理程序传递新书架和书本ID。
With the setState call, I am trying to 1) isolate the particular book using the passed-in id property, then 2) change the shelf property of that book to the new one selected by the user, then 3) re-render with the new shelf, which should place the book in the new shelf. 通过setState调用,我尝试1)使用传入的id属性隔离特定的书,然后2)将该书的书架属性更改为用户选择的新书,然后3)使用新书架,这会将书放到新书架中。 I am isolating the correct book by calling filter on the array, but after that I am getting lost. 我通过在数组上调用filter来隔离正确的书,但是在那之后我迷路了。 The code is below (JS first, then the JSX with the drop-down). 代码如下(首先是JS,然后是带有下拉列表的JSX)。 How can I accomplish this, I tried several approaches, including passing in prevState. 我如何做到这一点,我尝试了几种方法,包括传递prevState。 The latest one below is from an example I tried to emulate from reactTraining but it is giving me a Syntax error: Unexpected token in the setState call. 下面的最新示例来自我尝试从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>
You can do it with a loop through the books. 您可以循环浏览书籍。 When you find the book with the id, just change the shelf property: 当找到带有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 });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.