我想在反应期间显示加载

Question

当前代码仅在工作结束后（约 3 秒）显示 "Done !!!"。我想在"Loading..."之后先显示"Done !!!"。

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

const App = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [workingResult, setWorkingResult] = useState<string>();

    const runWorking = useCallback(async () => {
        // working.... (during about 3 seconds)
        var start = new Date().getTime();
        while (new Date().getTime() < start + 3000);

        return "Done !!!";
    }, []);

    const setWorking = useCallback(async () => {
        setLoading(true);
        setWorkingResult(await runWorking());
        setLoading(false);
    }, [runWorking]);

    useEffect(() => {
        setWorking();
    }, [setWorking]);

    return <div>{loading ? "Loading..." : workingResult}</div>;
};

export default App;

Answer 1

你需要使用 promise 构造函数 while 将无法工作，因为异步函数需要 return promise 的函数，所以试试这个：

  const runWorking = () =>
    new Promise(resolve =>
      setTimeout(() => {
        resolve("done");
      }, 3000)
    );

const setWorking = async () => {
    setLoading(true);
    setWorkingResult(await runWorking());
    setLoading(false);
}

这里是一个完整的工作 example

Answer 2

谢谢。我解决了。

const runWorking = () => new Promise(resolve => setTimeout(() => { 
    let returnValue:any = [];
    // working...
    resolve(returnValue); }, 1)
 ); 

    const setWorking = async () => { 
setLoading(true); 
setWorkingResult(await runWorking()); 
setLoading(false); 
}

我想在反应期间显示加载

I want to show loading during working in react

asynchronous

loading

reactjs