javascript - ReactJS 使用 API 调用 - 每次使用组件时数据都会发生变化

Question

对于我的项目，我使用来自 https://api.randomuser.me/ 的数据每次获取数据时，它基本上都会返回一个随机人。

我创建了一个组件(为了解决这个问题，我简化了它)，它返回 API 获取的人员的名字。但是，如果我使用该组件两次，我总是会得到两个不同的名称。如何重用该组件并自定义它(使用 props 等)，同时使用相同的数据集，然后每 10 秒刷新一次，如下面的代码所示？

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>


        )
        }

      }

    }

Answer 1

基于 https://www.valentinog.com/blog/await-react/前端侧对await 的支持不太好。我建议您使用 Axios 库。

另一方面，如果您需要使用 react 组件两次，您可能需要使用 react 组件键字段，如下所示: https://blog.cloudboost.io/key-concept-and-its-necessities-in-react-component-885c18084e59