AnyaDanilova
@AnyaDanilova
Начинающий фронтенд разработчик

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

Описание:
Каждый раз, когда нажимаем на "Добавить число", в конец списка добавляется случайное число.
"Старт" — запускает интервал в 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>
  );
}
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
0xD34F
@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>
  );
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы