Блог

Описание моей текущей ситуации:

Я разрабатываю приложение для продажи книг и использую контекст React для обмена состоянием между экранами. Когда я вхожу в экран книги, у меня есть две кнопки (пользовательские дочерние компоненты) «добавить в корзину» и «сохранить», которые при монтировании извлекают их соответствующее начальное состояние (добавленное в корзину или сохраненное соответственно) в моей БД.

Проблема

Когда кнопка «добавить в корзину» завершает получение своего начального состояния из базы данных, она обновляет свое родительское состояние «currentBookData» с помощью обратного вызова, который получает как prop.

То же самое для другой кнопки.

Вот код для экрана моей книги:

   function BookScreen(props) { // 
       const [bookData, setBookData] = useState(props.params.selectedBookData);


       const handleButtonAddToCartLoad = (isAddedToCart) => {
            const {currentUser} = props; // provided by the context

           // !!!!!!!!!!!!!!!!!!!!!!!
           const newBookData = { ...bookData, isAddedToCart };
           setBookData(newBookData);

           currentUser.addVisitedBook(newBookData.id, newBookData); // Update the book in the map of visited books
       }


       const handleButtonSaveLoad = (isSaved) => {
           const {currentUser} = props; // provided by the context

           // !!!!!!!!!!!!!!!!!!!!!!!
           const newBookData = { ...bookData, isSaved };
           setBookData(newBookData);

           currentUser.addVisitedBook(newBookData.id, newBookData); // Update the book in the map of visited books
       }
        


       useEffect(() => {
            // When the screen mounts, update the book data if it wasn't fetched previously
            (async () => {
                const {currentUser} = props; // provided by the context

                if(!currentUser.getVisitedBook(bookData.id)) {

                   // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                   const newBookData = await db.getBook(bookData.id); 

                   // Add the book to the visited books of list
                   currentUser.addVisitedBook(newBookData.id, newBookData );
                }
            })();
       }, []);


       return (
             <View>
                ...
                <AddToCartButton bookId={bookData.id} onLoad={handleButtonAddToCartLoad } />
                <SaveButton bookId={bookData.id} onLoad={handleButtonSaveLoad} />
             </View>
       )

         
  }

  export default withCurrentUser(BookScreen); // <------ It consumes the context where I have a Map with all the data which has been downloaded from the DB. Just to avoid unnecessary requests.
  

Как вы можете себе представить после прочтения кода, я обновляю состояние, используя обычный стандартный хук, предоставляемый React. Происходит то, что обновления поступают одновременно, поэтому состояние не «объединяется», оно всегда совпадает с последним обновлением:

     {
        id: "bookId",
        title: "bookTitle",
        isAddedToCart: false,
    }
  

или

     {
        id: "bookId",
        title: "bookTitle",
        isSaved: true,
    }
  

или иногда

    {
        id: "bookId",
        title: "bookTitle",
    }
    
  

но никогда не то, что мне нужно, чтобы это было

     {
        id: "bookId",
        title: "bookTitle",
        isAddedToCart: false,
        isSaved: true,
    }
  

Есть идеи, как решить эту проблему с помощью хуков??