React 状态已更新但不会重新渲染答案

【问题标题】：React state gets updated but wont re-renderReact 状态已更新但不会重新渲染
【发布时间】：2020-03-06 06:02:50
【问题描述】：

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

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

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

但是如果在 state 中找不到 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);
    });
  };

【问题讨论】：

通常你必须在副作用中进行 api 调用。请参阅 useEffect 钩子以了解反应钩子的副作用。 reactjs.org/docs/hooks-effect.html

标签： reactjs react-hooks render

【解决方案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);
    });
  };

【讨论】：