将道具传递到实现反应悬念的axios钩子

问题描述

我一直在尝试创建一个用于获取数据并利用react suspense的挂钩。 使用页面中的示例（和this article），我创建了一个获取数据的函数（我想将其转换为钩子）。

示例

Here on codesandbox

问题

当前，我无法通过调用函数时传递数据。我想在useWrap(**HERE**)中传递数据并在fetchData()中使用

预期的行为/目标

1. 我想将数据传递给useWrap（）并将其放入fetchData（）
2. 我希望useWrap成为一个Hook，以便利用基本的钩子
3. 我想利用React Suspense

有人知道如何满足这些需求，并告诉我我做错了什么吗？

谢谢！

解决方法

这应该为您解决问题，并且比您原来的反应更具反应性。

Api.js

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

export default function useWrap(id) {
  const [apiData,setApiData] = useState({});
  const [error,setError] = useState(null);

  useEffect(() => {
    (async () => {
      await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
        .then(async (res) => await res.json())
        .then((result) => setApiData(result))
        .catch((err) => setError(err));
    })();
  },[id]);

  return error ? error : apiData;
}

ProfileDetail.js

import React from "react";
import useWrap from "./Api";

export default function ProfileDetails() {
  const user = useWrap(1);

  if (user === null) {
    return;
  }

  return <div>{user.id}</div>;
}