如何解决如何在React中获取和显示JSON?
我目前正在练习获取数据并将其显示在React中。当我使用我的方法时,由于某种原因,它仅显示第一个对象,而不显示整个页面。有人可以帮我弄清楚为什么它不显示所有对象吗?非常感谢!
import React from "react";
export default class FetchRandomUser extends React.Component {
state = {
loading: false,crypto: null,newArray: [],};
async componentDidMount() {
const url = "https://api.nomics.com/v1/prices?key=(MYKEY)";
const response = await fetch(url);
const data = await response.json();
this.setState({ crypto: data[0],loading: false });
}
render() {
if (this.state.loading) {
return <div>loading...</div>;
}
if (!this.state.crypto) {
return <div>Something went wrong</div>;
}
return (
<div>
<div>{this.state.crypto.currency}</div>
<div>{this.state.crypto.price}</div>
<div>
{this.state.newArray.map(p) => (
<div key={p}>
<div>{p.currency}</div>
<div>{p.price}</div>
</div>
))}
</div>
</div>
);
}
}
解决方法
const url = "https://api.nomics.com/v1/prices?key=(MYKEY)";
const response = fetch(url);
response.then(res => res.json()).then(jsonData => console.log('Response',jsonData)).catch(error => console.log('Error',error));
您可以将jsonData分配给状态:例如:
this.setState({
...this.state,'crypto': data[0],'loading': false,'newArray': [...this.state.newArray,{...data}]
})
我不知道它的外观。我的意思是你的json。有什么数据?数据类型(数组,对象...)。
,在newArray
中获取API响应时,您需要设置componentDidMount
。
async componentDidMount() {
const url = "https://api.nomics.com/v1/prices?key=(MYKEY)";
const response = await fetch(url);
const data = await response.json();
this.setState({ crypto: data[0],newArray: data,loading: false
});
,
.setState
方法有问题。 setState
代码已执行时。属性newArray
消失。我认为您应该这样解决。
let tmp = this.state.newArray
tmp.push(this.state.crypto)
this.setState({ crypto: data[0],newArray: tmp,loading: false });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。