Javascript ReactJS处理API调用-每次使用组件时数据都会更改
在我的项目中，我使用的数据基本上是每次获取数据时都会返回一个随机的人 我创建了一个组件（为了解决这个问题，我简化了它），它返回API获取的人的名字。但是，如果我两次使用该组件，则始终会得到两个不同的名称。如何在使用相同的数据集（如下面的代码所示，该数据集每10秒刷新一次）的同时重用组件并对其进行自定义（使用道具等）Javascript ReactJS处理API调用-每次使用组件时数据都会更改,javascript,reactjs,Javascript,Reactjs,在我的项目中，我使用的数据基本上是每次获取数据时都会返回一个随机的人 我创建了一个组件（为了解决这个问题，我简化了它），它返回API获取的人的名字。但是，如果我两次使用该组件，则始终会得到两个不同的名称。如何在使用相同的数据集（如下面的代码所示，该数据集每10秒刷新一次）的同时重用组件并对其进行自定义（使用道具等） import React,{Component} from "react"; import { makeStyles } from '@material-ui/styles'; im
import React,{Component} from "react";
import { makeStyles } from '@material-ui/styles';
import Budgetdata from './Budgetdata.js'
import Caption from './Caption.js'
export default class Apicall extends Component {
intervalID;
constructor(props) {
super(props);
this.state = {
loading:true,
person:[],
random: 0,
name:"name"};
}
async getdata () {
const url = "https://api.randomuser.me/";
const response = await fetch(url);
const data = await response.json();
var value = Math.round(Math.random())
this.setState({ person: data.results[0],loading:false,random: value,name:"name"})
}
async componentDidMount() {
this.getdata()
this.intervalID = setInterval(this.getdata.bind(this), 10000);
}
async componentWillUnmount() {
clearInterval(this.intervalID);
}
render = props => {
if (this.state.loading || !this.state.person) {
return (<div>loading..</div>)
}
else
{
return(
<div>{this.state.person.name.first}</div>
)
}
}
}
import React，{Component}来自“React”；
从'@material ui/styles'导入{makeStyles}；
从“./Budgetdata.js”导入Budgetdata
从“./Caption.js”导入标题
导出默认类Apicall extends组件{
有效期；
建造师（道具）{
超级（道具）；
此.state={
加载：对，
人员：[]，
随机:0,，
名称：“名称”}；
}
异步getdata（）{
常量url=”https://api.randomuser.me/";
const response=等待获取（url）；
const data=wait response.json（）；
var value=Math.round（Math.random（））
this.setState（{person:data.results[0]，load:false，random:value，name:“name”}）
}
异步组件didmount（）{
这个文件名为getdata（）
this.intervalID=setInterval（this.getdata.bind（this），10000）；
}
异步组件willunmount（）{
clearInterval（此为有效期）；
}
渲染=道具=>{
if（this.state.loading | | |！this.state.person）{
返回（加载…）
}
其他的
{
返回(
{this.state.person.name.first}
)
}
}
}