Есть приложение на React (генератор случайных чисел), почему приложение работает неверно?

Question

[Аня Данилова]

Описание:
Каждый раз, когда нажимаем на "Добавить число", в конец списка добавляется случайное число.
"Старт" — запускает интервал в 1 сек., который добавляет в конец списка случайное число.
"Стоп" — останавливает таймер.

Помогите найти баг и если можно доработать код

import React from "react";
import "./styles.css";

export default function App() {
  let timer = null;
  const [numbers, setNumbers] = React.useState([1, 2, 3]);

  const addRandomNumber = () => {
    const random = Math.round(Math.random() * 10);
    setNumbers([...numbers, random]);
  };

  const start = () => {
    timer = setInterval(addRandomNumber, 1000);
  };

  const stop = () => {
    clearInterval(timer);
  };

  return (
    <div className="App">
      <ul>
        {numbers.map(num => (
          <li>{num}</li>
        ))}
      </ul>
      <div className="buttons">
        <button onClick={() => addRandomNumber()}>Добавить число</button>
        <button onClick={() => start()}>Старт</button>
        <button onClick={() => stop()}>Стоп</button>
      </div>
    </div>
  );
}

Comments

[Роман Александрович]

а что значит не верно? вы можете сделать рабочий проект в песочнице ? https://codesandbox.io/

Answer 1

[0xD34F]

Теряете значение, которое возвращает setInterval. Нужен ещё один useState.

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

function App() {
  const [ numbers, setNumbers ] = React.useState([ 1, 2, 3 ]);
  const [ timerId, setTimerId ] = React.useState(null);

  const add = () => setNumbers(numbers => [ ...numbers, Math.random() * 10 | 0 ]);
  const start = () => setTimerId(setInterval(add, 1000));
  const stop = () => (clearInterval(timerId), setTimerId(null));

  return (
    <div>
      <ul>
        {numbers.map(n => <li>{n}</li>)}
      </ul>
      <div>
        <button onClick={add} disabled={timerId}>Добавить число</button>
        <button onClick={start} disabled={timerId}>Старт</button>
        <button onClick={stop} disabled={!timerId}>Стоп</button>
      </div>
    </div>
  );
}