Блог

 import { Fragment, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import Cart from './components/Cart/Cart';
import Layout from './components/Layout/Layout';
import Products from './components/Shop/Products';
import { uiActions } from './store/ui-slice';
import Notification from './components/UI/Notification';

let isInitial = true;

function App() {
  const dispatch = useDispatch()
  const showCart = useSelector(state => state.ui.cartIsVisible)
  const cart = useSelector(state => state.cart)
  const notification = useSelector(state => state.ui.notification)

  // when sending a put request, the data on the server will be replaced with the data we are sending
  // unlike post request, where we append new data everytime we send a request 
  useEffect(() => {
    const sendCartData = async () => {
      dispatch(uiActions.showNotification({
        status: 'pending',
        title: 'sending...',
        message: 'sending cart data!'
      }))
      console.log('1');
      const response = await fetch('https://cart-306dd-default-rtdb.firebaseio.com/cart.json', {
        method: 'PUT',
        body: JSON.stringify(cart),
      })
      
      if(!response.ok){
        throw new Error('Sending cart data failed')
      }
      console.log('2');

      dispatch(uiActions.showNotification({
        status: 'success',
        title: 'success!',
        message: 'sent cart data successfully!'
      }))
      console.log('3');
    }

    if(isInitial){
      isInitial = false;
      return 
    }

    sendCartData().catch(error => {
      dispatch(uiActions.showNotification({
        status: 'error',
        title: 'error!',
        message: 'sending cart data failed!'
      }))
    })
  }, [cart, dispatch])
  // react-redux ensures that dispatch function will never change

  return (
    <Fragment>
      {notification amp;amp; 
        <Notification 
          status={notification.status}
          title = {notification.title}
          message = {notification.message} 
        />}
      <Layout>
        {showCart amp;amp; <Cart />}
        <Products />
      </Layout>
    </Fragment>
  );
}

export default App;
 

итак, в этом коде, когда функция useEffect() запускается в первый раз, потому что данные корзины были изменены, и запускается первая функция dispatch (), которая в конечном итоге приведет к обновлению состояния, но тогда функция useEffect() не должна завершаться, и весь компонент должен быть повторно отрисован.
Предположим, что функция useEffect() не завершается, даже если консоль.журналы, которые я хранил в коде, работают совсем по-другому :
из макета

 Layout.js:5 from layout
App.js:27 1
Notification.js:14 from notification
Layout.js:5 from layout
App.js:36 2
Notification.js:14 from notification
Layout.js:5 from layout
App.js:43 3
 

я не понимаю этот код, после первого console.log() происходит повторная визуализация компонента, затем обрабатывается запрос fetch (), а затем снова выполняется повторная визуализация, затем вызывается третий console.log (), я хочу знать причину этого, пожалуйста, может ли кто-нибудь помочь?????