Question

此功能在我的主要app.js组件中。当我需要向状态中的对象之一添加某些属性时被调用。

功能... 1用[... books]反映状态 2.在数组中找到对象，如果它不在状态，则将其推送 3.添加必要的属性
4.调用服务器更新，如果服务器响应为肯定... 5使用setBooks（）更新状态

当对象刚好处于状态并且我只需向对象添加属性时，刷新就会发生。

但是，如果未在状态下找到book对象，而我实际上是将该对象推到state数组...它将不会重新呈现。我需要在浏览器上按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()返回了一个承诺，您可以等待它返回并带有服务器的响应。

 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);
    });
  };

反应状态得到更新，但不会重新渲染

1 个答案: