TypeScript · 45 строк
Компонент показывает платежи клиента с фильтром по категории («ЖКХ», «Связь», «Переводы»). При возврате на вкладку список должен обновляться. Найдите ошибки.
В работе: Раздел «История» в веб-версии банка: клиенты быстро переключают категории.
Как проверяем
Нажмите на строку с ошибкой и коротко напишите, что не так. Баг засчитан, если отмечена хотя бы одна его строка. Зачёт — найдено не меньше 60 % багов с учётом серьёзности (критичный весит 3, обычный 2, мелкий 1), а лишних отметок не больше, чем багов в коде. Пустые строки, скобки и комментарии лишними не считаем. Ответ один на подход: после него показываем разбор.
Источник: Сбер: собеседование фронтенд-разработчика, код-ревью компонента. Условие пересказано своими словами.
Давали на собеседовании?
Ответов пока мало — ваш поможет.
import { useEffect, useState } from "react";type Payment = { id: string; title: string; amount: number; date: string };export function PaymentsHistory({ clientId, category }: { clientId: string; category: string }) {const [items, setItems] = useState<Payment[]>([]);const [loading, setLoading] = useState(false);const [total, setTotal] = useState(0);useEffect(() => {setLoading(true);fetch(`/api/payments?client=${clientId}&category=${category}`).then((r) => r.json()).then((data: Payment[]) => {setItems(data);setLoading(false);});}, [clientId]);useEffect(() => {let sum = 0;items.forEach((p) => (sum += p.amount));setTotal(sum);}, [items]);useEffect(() => {const onFocus = () => setItems([...items]);window.addEventListener("focus", onFocus);}, []);if (loading) return <div>Загрузка…</div>;return (<section><h2>Платежи: {total.toFixed(2)} ₽</h2><ul>{items.map((p, index) => (<li key={index}>{p.title} — {p.amount} ₽, {new Date(p.date).toLocaleDateString("ru-RU")}</li>))}</ul></section>);}