文章/答案/技术大牛

发布

社区首页 >问答首页 >如何显示API中的数据

问如何显示API中的数据
EN

Stack Overflow用户

提问于 2021-04-05 15:30:39

回答 1查看 58关注 0票数 0

概述：

我试图使用React来显示API中的数据。我有我所需要的“积木”，但我正在努力弄清楚如何将它们结合起来。

问题：

我有一个呈现的页面，一个请求API数据的fetch调用，以及一些遍历返回对象的代码。

我如何将这三件事结合起来，以便能够看到页面上呈现的内容？

谢谢!

这里是我的反应代码：

import { ... } from "...";

const Index = () => (
  <Page>
    <Frame>
      // HERE IS WHERE I WANT TO LOOP THROUGH THE API RESULTS
    </Frame>
  </Page>
);

export default Index;

下面是从API：获取数据的方式：

function getDataFromApi() {
  var url = "api.example.com";
  return fetch(url, {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  })
  .then((response) => response.json())
  .then((responseData) => {
    return responseData;
  })
  .catch((error) => console.warn(error));
}

这里是我如何遍历一个对象：

var i;

for (i = 0; i < objects.length; i++) { 
  var object = objects[i]
  console.log(object);
}

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-05 15:45:53

当组件呈现时，您需要调用端点，但只有第一次，如果出现额外的呈现，通常不想继续调用API。

import React, { useEffect } from "react";

const Index = () => {
  useEffect(() => {
    getDataFromApi() // <--- call your API on the first render only
  }, []);

  return (
  <Page>
    <Frame>
      // HERE IS WHERE I WANT TO LOOP THROUGH THE API RESULTS
    </Frame>
  </Page>
  );
}

export default Index;

钩子useEffect在任何依赖项更改时都会运行，在本例中存在cero依赖项，因此这个钩子只能运行一次！你怎么知道没有依赖关系？

useEffect(() => {
   // Your code
}, []); //<---- These are your dependencies, the array is empty, therefore no dependencies for this hook.

第二件事是在某个地方存储API响应，我们通常使用本地状态，但是您可以使用诸如redux、mobox等库来存储数据，在本例中，我将使用本地状态。

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

const Index = () => {
  const [data, setData] = useState([]); // <--- Initialize the state with an empty array
  useEffect(() => {
    getDataFromApi()
      .then((response) => setData(response)); // <---- Set the data to the local state
  }, []);

  return (
  <Page>
    <Frame>
      // HERE IS WHERE I WANT TO LOOP THROUGH THE API RESULTS
    </Frame>
  </Page>
  );
}

首先，需要使用useState钩子初始化本地状态。在服务器响应之后，需要将响应设置为本地状态，以便可以在组件上使用它。

return (
  <Page>
    <Frame>
      { data.map((item) =>
         <p key={item.id}>{item.name}</p>
       )}
    </Frame>
  </Page>
  );

假设data是一个数组，每当API响应时，数据就分配给本地状态，然后使用map，您可以循环数组并为每个项呈现一个段落或任何其他组件。

您需要确保为循环中的每个元素设置一个key，这将告诉您，如果键发生了更改，就会对挂载/卸载组件做出反应。

祝好运!

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66955487

复制

相似问题

问如何显示API中的数据
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何显示API中的数据EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何显示API中的数据
EN