Состояние реакции обновляется, но не перерисовывается - PullRequest
Новая
       22

Состояние реакции обновляется, но не перерисовывается

0 голосов
/ 28 февраля 2020

Эта функция в моем главном приложении. js компонент. Вызывается, когда мне нужно добавить определенные свойства к одному из объектов в состоянии.

функция ... 1 отражает состояние с помощью [... books] 2. находит объект в массиве, если он не находится в состоянии, он выдвигает его 3. добавляет необходимые свойства
4. вызывает обновление сервера и, если ответ сервера положительный ... 5 обновляет состояние с помощью setBooks ()

Когда объект находится в состоянии, и мне нужно только добавить свойства к объекту, происходит refre sh.

Но если объект книги не был найден в состоянии, и я фактически перемещаю объект в состояние массив ... он не будет перерисовывать. Мне нужно в браузере сделать pu sh 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);
    });
  };

1 Ответ

0 голосов
/ 06 марта 2020

Вы пытались превратить это в асинхронную функцию? Если 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);
    });
  };
...