typescript 如何在react中设置一个状态来反映一个函数是否已经完成运行？

tpgth1q7 于 2023-06-30 发布在 TypeScript

关注(0)|答案(2)|浏览(171)

我有一个函数需要很长时间才能运行，并且需要在React中实现一种“加载”消息，该消息在函数启动时显示，并在完成后消失。
我的第一个想法是

const myComponent = () => {

    const [isLoadingState, setIsLoadingState] = useState(false)

    // This function gets triggered whenever certain states get updated
    function verySlowFunction(): {
        setIsLoadingState(true);
        // various function calls
        // which take a long amount of time
        // here
        setIsLoadingState(false);
    }

    return (
        <h1>Our component here</h1>
        {isFetchingState ? <h5>Currently loading...</h5> : ''}
    )
}

这个想法是，当函数开始时，'isLoadingState'变成'true'，因此在底部返回的组件将显示为“Currently loading..."，当它到达函数的最后一行时，它将其设置回'false'，因此h5组件消失。（逻辑已经过测试，并按预期工作）。
我在使用这种方法时遇到的问题是，无论出于何种原因，setIsloadingState在初始加载之后似乎没有将组件设置为true或false。
有没有人知道我可能做错了什么，或者有什么更好的方法可以做到这一点（而不必改变“verySlowFunction（）”的实现）？

typescript

来源：https://stackoverflow.com/questions/76576778/how-to-set-a-state-in-react-that-reflects-if-a-function-has-completed-running-or

2条答案

按热度按时间

tuwxkamq1#

您可以使用promise来处理这种情况。

function SamplePromise() {
 var promise = new 
   Promise(function(resolve, reject) {
  //Do something 
 resolve('your result')
 });
 return promise;

然后，您可以调用此函数并使用then来获取数据并更改加载状态。比如

await SamplePromise().then((data)=> 
 setIsLoadingState(false))

.then（）将在promise完成工作时调用。

赞(0）回复(0）举报 2023-06-30

5kgi1eie2#

React 18引入了新的钩子。
useTransition是一个React Hook，可以让你在不阻塞UI的情况下更新状态。
你可以像下面这样做：

function App() {
  const [isPending, startTransition] = useTransition();
  const verySlowFunction = () => {...};

  useEffect(() => {
    startTransition(() => {
      verySlowFunction();
    });
  }, [])

  return (
    <>
      <h1>Our component here</h1>
      {isPending ? <h5>Currently loading...</h5> : ""}
    </>
  );

}

赞(0）回复(0）举报 2023-06-30

我来回答

typescript 如何在react中设置一个状态来反映一个函数是否已经完成运行？

2条答案

相关问题

热门标签

最新问答