时间戳

首页 > 解决方案 > 将 props 传递给实现 react suspense 的 axios hook

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

问题描述

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

例子

在代码沙盒上

问题

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

预期行为/目标

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

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

谢谢！

标签： javascriptreactjsaxiosreact-hooksreact-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>;
}

推荐阅读