如何显示从API到ReactJS的获取数据？
如何显示从API到ReactJS的获取数据？
提问于 2022-02-17 11:12:26
我是新的反应和API请求调用。
我创建了一个基本的React。我需要通过调用API来显示数据。我能够检索控制台中的数据，但发现很难在浏览器上显示数据。下面是我需要显示的数据：控制台数据
下面是我编写的代码(由邮递员生成)：
import React from "react";
class FetchRandom extends React.Component {
render() {
var myHeaders = new Headers();
myHeaders.append(
"Authorization",
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik1yNS1BVWliZkJpaTdOZDFqQmViYXhib1hXMCIsImtpZCI6Ik1yNS1BVWliZkJpaTdOZDFqQmViYXhib1hXMCJ9.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvY29vcG9ubGluZS5zaGFyZXBvaW50LmNvbUA4MzRmYjdiNC02MjRkLTRkZTgtYTk3Ny0yZDQ2YWQ5NzliZDkiLCJpc3MiOiIwMDAwMDAwMS0wMDAwLTAwMDAtYzAwMC0wMDAwMDAwMDAwMDBAODM0ZmI3YjQtNjI0ZC00ZGU4LWE5NzctMmQ0NmFkOTc5YmQ5IiwiaWF0IjoxNjQ1MDg1NjQ3LCJuYmYiOjE2NDUwODU2NDcsImV4cCI6MTY0NTE3MjM0NywiaWRlbnRpdHlwcm92aWRlciI6IjAwMDAwMDAxLTAwMDAtMDAwMC1jMDAwLTAwMDAwMDAwMDAwMEA4MzRmYjdiNC02MjRkLTRkZTgtYTk3Ny0yZDQ2YWQ5NzliZDkiLCJuYW1laWQiOiJhMDFkNGE5Yi1mZGE2LTQ2ZTQtOTE3NC02NjFhNjY3M2FjZGNAODM0ZmI3YjQtNjI0ZC00ZGU4LWE5NzctMmQ0NmFkOTc5YmQ5Iiwib2lkIjoiMGU4ZDY3NjQtM2JjNS00MDg2LTgxOGUtZGU3N2VlODYyOTc4Iiwic3ViIjoiMGU4ZDY3NjQtM2JjNS00MDg2LTgxOGUtZGU3N2VlODYyOTc4IiwidHJ1c3RlZGZvcmRlbGVnYXRpb24iOiJmYWxzZSJ9.ge789TPniLEXtK_2zuMqZzOgLM6z1arpC5CEDAGB9J3VoEllwKCEXtlL-jzCo45aLD6VOanIbWUugdFuGXeBgeuCSV9PYRGSX9qmf5sWWvGqGM3InLq6-xHtUUE56cq9EQI634jfytq8XhUO3uLXj9x3J5rumY4WH1E0LEivCCy2A02iGmxFHsa6uTC1Iy1K_wJ4jIqlf3KRU8h0rO6HSmx2uPDeVM7KtMRFanWMgYrGUzBIk5Yh-kFCfdXFftPA_VQQGBP4A_I_3LVlbwWkvoiUmNBQYDf55Oh6onp0aDDRxViCCHcclICGGjUhh1j6fnQMmJZwOpVv7GEOKnpB1g"
);
myHeaders.append("Accept", "application/json;odata=verbose");
var requestOptions = {
method: "GET",
headers: myHeaders,
redirect: "follow",
};
fetch(
"https://cooponline.sharepoint.com/sites/TestDemoFeb/_api/web/lists/getbytitle('TestPost')/GetItembyID(4)",
requestOptions
)
.then((response) => response.text())
.then((data) => console.log(data))
.catch((error) => console.log("error", error));
return <div></div>;
}
}
export default FetchRandom;有人能帮我一下吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-17 11:28:20
您可以使用状态的概念以一种简单的方式实现这一点。只需创建一个这样的牛排：
const [data, setData] = useState();/
//在您的获取中，您可以编写如下内容：
fech("your URL")
.then(res => res.json())
.then(data => {
setData(data);
})
.catch(error => {
setData("An Error Happened: ", error);
})/
然后，在返回的组件中，通过添加花括号和状态来使用它--例如，这里是数据--您就完成了！此外，您还可以使用一些更好和优雅的东西，如条件渲染等，以更好的显示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71157045
复制相关文章
相似问题
腾讯云开发者
