Обнаружение и исправление ошибок в React‑компоненте

Условие

В этом задании необходимо проанализировать представленный фрагмент React‑компонента и устранить синтаксические и логические недочёты, чтобы приложение корректно отображало список пользователей, счётчик и таймер.

import React, { useState, useEffect } from "react";

const Button = ({ onClick, title, className }) => (
  <div
    className={className}
    style={{ border: "1px solid black", width: "150px", cursor: "pointer" }}
    onClick={onClick}
  >
    {title}
  </div>
);

const User = ({ age }) => <div>{age}</div>;

export default function App() {
  const [clickCount, setClickCount] = useState(0);
  const [userList, setUserList] = useState([]);
  const [timer, setTimer] = useState(15);

  const addUser = () => {
    setClickCount(clickCount + 1);
    setUserList([
      ...userList,
      {
        id: 1 + Math.floor(Math.random() * 10),
        age: Math.round(20 + Math.random() * 40),
      },
    ]);
  };

  const resetAll = () => {
    setClickCount(0);
    setUserList([]);
  };

  useEffect(() => {
    if (timer <= 0) return;
    const id = setTimeout(() => setTimer(prev => prev - 0.1), 100);
    return () => clearTimeout(id);
  }, [timer]);

  const totalAge = userList.reduce((sum, user) => sum + user.age, 0);

  if (timer <= 0) {
    return (
      <div>
        <div>Count: {clickCount}</div>
        <div>Age sum: {Math.round(totalAge)}</div>
        {userList.map(user => (
          <User key={user.id} age={user.age} />
        ))}
      </div>
    );
  }

  return (
    <div>
      <div>Remain time: {timer.toFixed(1)} seconds</div>
      <Button onClick={addUser} title="Add random user" />
      <div>Count: {clickCount}</div>
      <div>Age sum: {Math.round(totalAge)}</div>
      {userList.map(user => (
        <User key={user.id} age={user.age} />
      ))}
      {clickCount > 0 && (
        <Button onClick={resetAll} title="Remove all" className="remove-button" />
      )}
    </div>
  );
}

Ответ

Представленный JSX уже синтаксически корректен. Реальные слабые места — всего десять возможных id, неточная модель таймера и div вместо доступной кнопки; исправлять несуществующие ошибки не нужно.

Случайный id от 1 до 10 быстро даёт повторяющиеся key. Выделяйте монотонный id через useRef или используйте уникальный идентификатор, создавая его в обработчике. Связанные clickCount/userList удобно хранить вместе либо выводить count из длины списка.

Обновление списка делайте функционально: setUserList(previous => [...previous, newUser]); объект newUser создавайте до updater, чтобы updater был чистым. Таймер уже очищается правильно, но вычитание 0.1 на каждом тике накапливает погрешность и задержки. Для точного оставшегося времени сравнивайте performance.now() с дедлайном и ограничивайте результат нулём. Используйте button type="button". resetAll сейчас очищает пользователей, но не перезапускает таймер: менять это следует только при соответствующем требовании.