API 不会返回数据

Question

当我在显示特定配置文件的数据的页面中时，我试图调用 API。

网址如下： localhost:8000/profile/223

API 也需要调用api/profile/223

我试图调用 API 的方式是：

const ProfileLayout = () => {
    const [profileId, setProfileId] = useState();

    useEffect(() => {
        fetch('api/profile/id')
        .then(result => {
            setProfileId(result.id);
        });
    }, [id])
    };

Answer 1

Fetch 要求您在使用数据之前从 Response 对象返回数据的格式。 使用response.json()从您的请求中获取 JSON。

就像提到的@Adriana6 一样，将/添加到 URL 的开头。

使用profileId将值注入 URL 字符串。

useEffect(() => {
  fetch('/api/profile/${profileId}')
    .then(response => response.json())
    .then(result => {
      setProfileId(result.id);
    });
}, []);

我在 React.js 方面没有很多经验，但是通过阅读这篇关于如何使用 React Hooks 发出fetch请求的文章，我学会了如何做到这一点。 我建议你也研究一下。

Answer 2

请在您的 fetch 函数参数中写入完整的 url，如localhost:8000/profile/${id} 。 然后解析为json。

另一方面，您没有任何 id 字段。 因此，在 useEffect 中使用 id 根本不会被触发。 如果您希望在页面加载时触发它，请使用

useEffect(() => {
    // fetch
}, [])

代替

useEffect(() => {
    // fetch
}, [id])

或者您可以使用profileId更改id 。 在这种情况下，您必须在获取配置文件数据之前检查profileId是否为真（非空）