Почему реакт странно рисует остальные элементы массива?

Question

[Timur]

Вот такой код странницы отвечающей за "корзину", которая хранит в sessionStorage выбранные товары и их количество(вроде юзер выбрал товар 2 штуки товара с айди 4):

export function ShopppingCartPage() {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const productIdentifiersFromStorage = getShoppingCartProductsFromSession();

    if (Array.isArray(productIdentifiersFromStorage)) {
      const asyncFun = async () => {
        for (let p of productIdentifiersFromStorage) {
          try {
            const response = await getCategory(p.PurchasedCategoryId);

            if (response.status === 200) {
              const category = {
                ...response.data,
                numberOfPurchases: p.NumberOfPurchases,
              };
              if (Array.isArray(categories) && categories.length > 0)
                setCategories((old) => [...old, category]);
              else setCategories([category]);
            }
          } catch (error) {
            console.error(error);
          }
        }
      };
      asyncFun();
    } else {
      console.error("No products");
    }
  }, []);

  return Array.isArray(categories) && categories.length > 0 ? (
    <>
      {categories.map((x) => (
        <div key={x.id}>
          {x.id}
        </div>
      ))}
      <button onClick={() => {...}}>Buy all products</button>
    </>
  ) : (
    <>
      <div>you shopping cart is empty</div>
    </>
  );
}

Так вот, получаю почему то лишь один айди, при этом я проверил, сервер все правильно выдает, getShoppingCartProductsFromSession тоже работает как надо. Перезагружал vscode несколько раз, не помогло. Уже часа 2-3 пытаюсь понять почему он не рисует все а лишь один. Буду оооченньь благодарен за вашу помощь

Comments

[WbICHA]

if (Array.isArray(categories) && categories.length > 0)
  setCategories((old) => [...old, category]);
else setCategories([category]);

А сколько должно быть элементов, когда ты каждый раз массив с одним значением добавляешь?

Answer 1

[Timur]

Я что то забыл что реакту нужно перерисовывать компонент, видимо рисовал он не сразу потому length таки оставалось 0
решил:

if (Array.isArray(productIdentifiersFromStorage)) {
      const asyncFun = async () => {
        const resultArray = [];

        for (let p of productIdentifiersFromStorage) {
          try {
            const response = await getCategory(p.PurchasedCategoryId);

            if (response.status === 200) {
              const category = {
                ...response.data,
                numberOfPurchases: p.NumberOfPurchases,
              };
              resultArray.push(category);
            }
          } catch (error) {
            console.error(error);
          }
        }
        setCategories([...resultArray]);
      };
      asyncFun();
    } else {
      console.error("No products");
    }
  }, []);