React状态会更新，但不会重新渲染

Question

我的主要app.js组件中的这个函数。当我需要将某些属性添加到状态中的某个对象时调用。

函数。。。1反映了[…书籍]的状态2.在数组中查找对象，如果它不处于状态，则推送它3.添加必要的属性
4。调用服务器更新，如果服务器响应为肯定。。。5使用setBooks((更新状态

当对象恰好处于状态，并且我只需要向对象添加属性时，就会进行刷新。

但是，如果在状态中没有找到book对象，并且我实际上正在将该对象推到状态数组中。。。它不会重新渲染。我需要在浏览器上按F5键才能看到正在渲染的对象。

const [books, setBooks] = useState([]);

const changeShelf = (book, shelf) => {
const updatedBooks = [...books];
let found = updatedBooks.findIndex(element => book.id === element.id);
if (found === -1) {
updatedBooks.push(book);
found = books.length - 1;
}
updatedBooks[found].shelf = shelf;
updatedBooks[found].stamp = Date.now();

BooksAPI.update(book, shelf).then(data => {
console.log(data);
if (data[shelf].includes(book.id)) setBooks(updatedBooks);
});
};

Answer 1

您是否尝试过将其转换为异步函数？如果BooksAPI.update()返回promise，则可以等待它返回服务器的响应。

const [books, setBooks] = useState([]);
const async changeShelf = (book, shelf) => {
const updatedBooks = [...books];
let found = updatedBooks.findIndex(element => book.id === element.id);
if (found === -1) {
updatedBooks.push(book);
found = books.length - 1;
}
updatedBooks[found].shelf = shelf;
updatedBooks[found].stamp = Date.now();
await BooksAPI.update(book, shelf).then(data => {
console.log(data);
if (data[shelf].includes(book.id)) setBooks(updatedBooks);
});
};