> Как реализовать добавление рандомного товара в корзину и удаление его из ассортимента по клику? (JavaScript)

Короткий ответ

Реализация состоит из двух независимых состояний: список товаров и корзина. При клике на товар генерируем уникальный id, добавляем его в корзину и удаляем из ассортимента. Для удаления из ассортимента используем фильтрацию массива товаров по id. Важно работать с иммутабельными обновлениями состояния, чтобы избежать мутаций исходных данных.

Подробное объяснение

Задача сводится к управлению двумя массивами: products (доступные товары) и cart (товары в корзине). При клике на товар выполняем две операции: добавляем копию объекта товара с новым id в cart и удаляем оригинал из products по id. Ключевой момент - генерация уникального id для элемента корзины, так как один товар может быть добавлен несколько раз (если он ещё доступен). Используем crypto.randomUUID() или библиотеку типа nanoid. Удаление из ассортимента делаем через Array.filter(), возвращая новый массив без удалённого элемента. Для корзины - через Array.push() или spread-оператор, создавая новый массив.

На практике

В реальном приложении (например, интернет-магазин) такая логика встречается в компонентах каталога и корзины. Обычно состояние поднимается на уровень стора (Redux, Zustand) или контекста React. Важно предусмотреть edge cases: что если товар уже в корзине? По условию - добавляем новый элемент с уникальным id, не проверяя дубликаты. Также нужно обрабатывать ситуацию, когда товар закончился (массив products пуст). Для оптимизации ререндеров используем useMemo или React.memo для списков.

Пример кода

JAVASCRIPT
import { useState } from 'react';

const initialProducts = [
  { id: 1, name: 'Товар А', price: 100 },
  { id: 2, name: 'Товар Б', price: 200 },
];

function Shop() {
  const [products, setProducts] = useState(initialProducts);
  const [cart, setCart] = useState([]);

  const handleAddToCart = (product) => {
    const cartItem = {
      ...product,
      cartId: crypto.randomUUID(),
    };
    setCart(prev => [...prev, cartItem]);
    setProducts(prev => prev.filter(p => p.id !== product.id));
  };

  return (
    <div>
      <h2>Товары</h2>
      {products.map(product => (
        <button key={product.id} onClick={() => handleAddToCart(product)}>
          {product.name} - {product.price}₽
        </button>
      ))}
      <h2>Корзина</h2>
      {cart.map(item => (
        <div key={item.cartId}>{item.name}</div>
      ))}
    </div>
  );
}

Как отвечать на собеседовании

Начни с описания структуры данных: два массива. Объясни, почему нужен уникальный id для корзины. Упомяни иммутабельность и почему это важно в React (предсказуемость состояния, работа хуков). Если спросят про производительность - скажи, что фильтрация массива O(n), но для типичного UI это приемлемо. Для больших списков можно использовать Map или Set для O(1) удаления. Покажи понимание, что это учебный пример, а в продакшене данные обычно приходят с сервера.

Что проверяет интервьюер

• Понимание работы с состоянием и иммутабельностью в React
• Умение работать с массивами: filter, spread, map
• Осознание необходимости уникальных ключей (key) в списках
• Способность предусмотреть edge cases (повторное добавление, пустой список)
• Знание современных API (crypto.randomUUID) или альтернатив

Типичные ошибки

• Мутация исходного массива через splice или delete (нарушение иммутабельности)
• Использование индекса массива как key для корзины (приводит к багам при удалении)
• Отсутствие уникального id для корзины (если товар можно добавить повторно)
• Неправильная обработка состояния: изменение products до обновления cart (может вызвать race condition в асинхронных сценариях)
• Забывают, что при удалении из ассортимента товар исчезает из UI, что может быть неочевидно пользователю