如何使用 useMemo 而不是使用 javascript 的本地状态并做出反应？

Question

我想使用 useMemo 而不是使用 javascript、react 和 graphql 的本地状态。

我想做什么？

我正在根据从进度查询中获取的数据显示进度条。从进度查询中获取的数据设置为状态。

下面是代码，

const ProgressModal = (status) => {
    const [progress, setProgress] = React.useState<>(undefined); //progress state 
    //setting
    
    const { data: progressData, stopPolling: stopPolling } = 
        useCheckProgressQuery({
            variables: {id},
            pollInterval: 3000,
        })
   
    React.useEffect(() => {
        if (status === initial) {
            setProgress(undefined);
        }
        if (status===started) {
            setProgress(progressData);
        }
        if (status === finished && completed >= total || status === failed) {
            stopPolling();
            setProgress(undefined);
        }
    }, [progress, progressData, setProgress]);

    const completed= progress
        ? progress.Progress.completed : 0;
    const total = progress ? progress.Progress.total : 0;
    let value = 0; 
    if (completed > 0 && total > 0) {
        value = (completed / total) * 100;
    }

    return (
        <ProgressBar value = {progress} />
    );
}

以上代码有效，但我如何在上述情况下使用 useMemo 而不是本地状态。有人可以帮我解决这个问题吗？我刚开始使用 React Hooks。谢谢。

Answer 1

useMemo 和 useState 与 useEffect 做不同的事情，所以你不能将 useState/useEffect 100 % 等同地转换为 useMemo.

一个或多或少等效的useMemo方法是这样的（但它不起作用，其他重构也将是必要的，见下文）：

const progress = useMemo(() =>{
  if( status === initial ){
    return undefined;
  }
  if( status===started ){
    return progressData;
  }
  if( status === finished && completed >= total || status === failed ){
     return undefined);
  }
  return undefined; // <-- you need to define default/fallback
},
[ progressData, status, completed, total ] // <-- some where missing in your example
);

这不是可行的解决方案，需要更多的重构：

这里例如stopPolling() 未调用，现在需要额外的 useEffect。
progress依赖于completed和total，而completed/total都依赖于progress（循环依赖）

如何使用 useMemo 而不是使用 javascript 的本地状态并做出反应？

How to use useMemo instead of a local state using javascript and react?

javascript

reactjs

graphql