Как реализовать функцию, чтобы при каждом нажатии кнопки выводилась строка, значение которой увеличивается на 1 с каждым следующим шагом?

Question

JadeDragon

javascript , react

Как реализовать функцию, чтобы при каждом нажатии кнопки выводилась строка, значение которой увеличивается на 1 с каждым следующим шагом?

Как в реакте с использованием хуков реализовать вывод строк, в которых значения будут увеличиваться на 1 при нажатии кнопки? Например, по нажатии на кнопку должна вызываться функция с циклом while (i < 10), и на каждой итерации должна выводиться строка с текущим значением i на страницу. Я не понимаю, как сделать такой вывод строк в реальном времени с помощью хуков. Спасибо!

6 октября 2023 г. 12:47

Ответы на вопрос 2

Похожие вопросы

Answer 1

Вот пример реализации такой функциональности на языке JavaScript и фреймворке React с использованием хуков:

```javascript
import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    let i = 0;
    while (i < 10) {
      setTimeout(() => {
        setCount(prevCount => prevCount + 1);
      }, i * 1000);
      i++;
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Нажми</button>
      <p>{count}</p>
    </div>
  );
}

export default App;
```

В этом примере мы создаем компонент App, который содержит переменную состояния `count` с помощью хука `useState`. При нажатии на кнопку, функция `handleClick` запускается и итерирует по циклу while, где каждую секунду значение `count` увеличивается на 1 с помощью `setCount`. Значение `count` отображается на странице с помощью элемента `<p>`.

Обратите внимание, что использование цикла `while` внутри функционального компонента может привести к некорректному поведению. В данном примере, все обновления `count` произойдут в одном рендере, и результатом будет только конечное значение `count`. Если вы хотите видеть интервальные обновления на странице, вам, возможно, потребуется использовать библиотеку для управления асинхронностью, например `react-promise-tracker` или другую технику, такую как рекурсивные вызовы `setTimeout` внутри хука `useEffect`.

Answer 2

javascript выполняет операции по одной за раз, поэтому если используется цикл while, ничего не будет отображаться на экране, пока цикл не завершится. Если нужно вывести 10 строк сразу, то можно использовать асинхронность с помощью async и await внутри цикла.

В React для отображения нескольких строк используется массив. Пример кода:

const lines = [1, 2, 3];

return lines.map(line => (
   {line} 
));

Если нужно добавлять строку при клике, то состояние массива нужно отслеживать и обновлять. Пример кода:

function Component() {
  const [lines, setLines] = useState([1, 2, 3]);
  
  const addLine = useCallback(() => {
    setLines(lines => [...lines, lines.length+1]);
  });
  
  return(
    <>
      
      {lines.map(line => (
         {line} 
      ))}
    
}

Если нужно добавлять 10 строк с задержкой при клике, то можно использовать setTimeout с async/await. Пример кода:

const delay = (ms) => new Promise(r => setTimeout(r, ms));

function Component() {
  const [lines, setLines] = useState([]);
  
  const addLines = useCallback(async () => {
    let i = 0;
    while(i++ < 10) {
      await delay(1000);  
      setLines(lines => [...lines, i]);
    }
  });
  
  return(
    <>
      
      {lines.map(line => (
         {line} 
      ))}
    
  );
}