React / Gatsby - один и тот же код useEffect не работает в разных компонентах - PullRequest
Новая
       10

React / Gatsby - один и тот же код useEffect не работает в разных компонентах

1 голос
/ 20 апреля 2020

ОБНОВЛЕНИЕ: я изменил корзину, переменную setCart на arr, setArr и с тем же кодом, он работает нормально.

У меня странная проблема с использованием useEffect в разных компонентах, оно работает, как и ожидалось, в моем функциональном компоненте, который импортирован на главную страницу моего сайта. Однако на странице корзины это не так, состояние пустое, и когда я регистрирую его, я вижу, что в массиве есть элементы, но он говорит мне, что длина равна 0. Это выглядит так: 

[{.},{.},{.}]

Переменная я установил локальное хранилище на первоначальные журналы нормально. Проблема возникает, только когда я пытаюсь установить состояние.

Вот код useEffect, он одинаков для обоих компонентов. 

 const [cart, setCart] = useState([])

 useEffect(() => {
  const cart = JSON.parse(localStorage.getItem("cart"))
   if (cart !== null) {
     setCart(cart)
   }
 }, [])

Переменная корзины возвращается в виде массива так что это соответствует моему объявлению useState ().

Вот еще немного кода, чтобы помочь. Корзина. js

 {cart && cart.length > 0 ? (
   cart.map((item, index) => {
     if (item.quantity > 0) {
       return (
         <li key={index}>
           <span className={styles.itemName}>
             {item.name}
             <span
               className={styles.remove}
               onClick={() => removeItem(item)}
             >
               <FiX /> Remove
             </span>
           </span>
           <span className={styles.quantity}>
             <span onClick={() => incrementItem(item)}>
               <FiChevronUp />
             </span>
             <span>{item.quantity}</span>
               <span onClick={() => decrementItem(item)}>
                 <FiChevronDown />
               </span>
             </span>
               <span className={styles.price}>
                 <span className={styles.priceTotal}>
                   ${(item.price * item.quantity).toFixed(2)}
                 </span>
                 <span className={styles.priceEach}>
                    ${item.price} each
                  </span>
                </span>
              </li>
            )
        }
      })
    ) : (
      <li>No Items</li>
    )}

Корзина отображается на самой странице.

...