API 不会返回数据

Question

当我在显示特定配置文件的数据的页面中时，我正在尝试调用 API。网址如下所示：localhost:8000/profile/223API也需要调用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 方面没有很多经验，但通过阅读这篇关于如何fetch使用 React Hooks 发出请求的文章学会了如何做到这一点。我建议你也调查一下。

Answer 2

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

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

useEffect(() => {

    // fetch

}, [])

代替

useEffect(() => {

    // fetch

}, [id])

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