使用 React Suspense 和 Axios 数据获取时的无限循环答案

【问题标题】：Infinite loop when using React Suspense and Axios data fetch使用 React Suspense 和 Axios 数据获取时的无限循环
【发布时间】：2022-11-20 21:38:50
【问题描述】：

我正在尝试使用 Axios 获取数据并将其显示在悬念元素中，就像在本教程中一样：https://dev.to/darkmavis1980/a-practical-example-of-suspense-in-react-18-3lln

但是，wrapPromise 函数让我陷入了无限循环：

function wrapPromise(promise: Promise<any>) {
    let status = 'pending';
    let response : any;
  
    const suspender = promise.then(
      res => {
        status = 'success';
        response = res;
      },
      err => {
        status = 'error';
        response = err;
      },
    );
  
    const handler = {
      pending: () => {
        throw suspender;
      },
      error: () => {
        throw response;
      },
      default: () => response,
    };
  
    const read = () => {
        //@ts-ignore
      const result = handler[status] ? handler[status]() : handler.default();
      return result;
    };
  
    return { read };
  }
  
  export default wrapPromise;

我期待这条线

pending: () => {
        throw suspender;
      }

在开始时被调用一次（或几次），但它永远被调用......我已经尝试重写这段代码以返回结果但没有成功......

我像这样调用 wrapPromise() 函数（简化）：

const dataFetch = (id: number) => {
    const logsPromise: Promise<Array<Log>> = fetchLogs(id)
    return {
        logs: wrapPromise(logsPromise),
    }
}


function fetchLogs(id: number): any {
    return axios
        .get(`myurl/getlogs?id=${id}`)
        .then((r) => r.data as Array<Log>)
        .catch((err) => console.log(err))
}

const logTable = function logTable({ id }: logProps) {
     return (
            <Suspense
                    fallback={<FallbackComponent />}
                >
                    <LogResult id={id} />
                </Suspense>
        )
}

const LogResult  = function MyLogs({ id }: LogResultProps) {
    let logs: any = dataFetch(id).logs.read() 
    return <LogComponent logs={logs as Array<Log>} />
}

【问题讨论】：

标签： reactjs typescript axios react-suspense react-18

【解决方案1】：

我通过放弃 wrapPromise() 和 dataFetch() 函数并改用 https://swr.vercel.app/ 找到了解决此问题的方法。

LogResult 组件变为：

const LogResult  = function MyLogs({ id }: LogResultProps) {
    const fetcher = (id: number) => fetchLogs(id)
    const { data: logs } = useSWR(
        id as any,
        fetcher,
        { suspense: true}
      );
    return <LogComponent logs={logs as Array<Log>} />
}

这里有更详细的文章：https://dev.to/darkmavis1980/using-swr-hook-with-suspense-in-react-18-1clk

【讨论】：