Блог

У меня есть функциональный компонент ниже. Когда мой пользователь нажимает на кнопку click me, я хочу вызвать длительную транзакцию с функцией GetAllData через 3 секунды.

В теге h1 я хочу иметь возможность обновлять своих пользователей, чтобы они могли знать, когда выполняется длительная транзакция. Я хотел бы отсчитать, как 5,4,3,2,1, Готово

Как я могу обновить этот код, чтобы сделать это?

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

        export default function App() {
          const [count, setCount] = useState(5);

          const kickoff = () => {
            const timeout = setTimeout(() => {
              GetAllData()
              //setCount(1);
            }, 3000);
          
          }
          
          return (
            <div className="App">
              <h1>{count}</h1>
              <button onClick={() => kickoff}>Click Me</button>
            </div>
          );
        }
  

Как вы можете отсчитывать длительный процесс? Существует ли какой-либо сценарий, в котором вы точно знаете, сколько времени потребуется при ее вызове, чтобы вы могли считать в обратном направлении до 0? Ответ отрицательный.

Если вы хотите уведомить пользователей о завершении, используйте state и установите флаг, когда процесс завершен (в обратном вызове).

 const [isRunning, setIsRunning] = useState(false)

<h1>{isRunning ? 'Process is running': ''}</h1>
  

Редактировать

Если это длительный процесс, вы можете захотеть внедрить его в web worker (вам придется исследовать это самостоятельно). Или вы могли бы обернуть это в обещание.

По сути, вы устанавливаете флаг в значение true прямо перед вызовом вашего продолжительного процесса, а затем устанавливаете его в значение false, когда он завершен, либо с помощью обратного вызова, либо, в случае обещания, .then() . Если процесс блокируется, сообщение о состоянии отображаться не будет, поскольку повторный рендеринг будет заблокирован до его завершения.