将 props 传递给实现 react suspense 的 axios hook

Question

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

示例

Here on codesandbox

问题

目前我无法通过函数传递数据，因为它在被调用时被执行。我想在useWrap(**HERE**) 中传递数据并在fetchData() 中使用它

预期行为/目标

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

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

谢谢！

Answer 1

这应该对你有用，并且比你原来的更类似于反应。

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>;
}