多次提取 API 調用返回錯誤 403（未運行第二個 API 調用）

Question

我正在嘗試為我正在處理的英雄聯盟 API 項目執行多個 API 獲取調用。 之所以必須進行多次API調用，是為了先獲取用戶的accountId。 當我通過第一次 API 調用獲取帳戶 ID 時，我需要使用 accountId 進行第二次 API 調用以獲取玩家的比賽歷史統計數據，這可以通過第二次 API 調用來完成。 總的來說，我正在嘗試獲取球員的比賽歷史，以便我可以將其放入圖表中以顯示用戶的“最常使用的冠軍”但是，無法運行第二個 API 調用並且代碼返回錯誤 403。

錯誤

import React, {Component} from 'react'
import ChartData from './ChartData'

class Chart extends Component {
constructor(props) {
    super(props)
    this.state = {
        error: null,
        isLoaded: false,
        stats: [],
        matchHistory: null,
        chartData: {},
        accountId: ''
    }
}

componentDidMount() {
    this.getUserInfo();
}

getUserInfo = () => {
    const proxyurl = "https://mysterious-wave-96239.herokuapp.com/";
    const url = "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" + this.props.username + "?api_key=" +process.env.REACT_APP_SECRET_KEY;
    fetch(proxyurl + url)
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isLoaded: true,
                stats: result,
                accountId: result.accountId
            }
            ,console.log(`this is the users account id = ` + result.accountId));
        },
        (error) => {
            this.setState({
                isLoaded: true,
          error: {
              message: "Error - Something went wrong!"
            }
        });
    }
    )
}




render () {
    return (
        <div className="chart">
        <ChartData accountId={this.state.accountId} />
        </div>
    )
   }
}
export default Chart

    import {Bar
    // ,Line
    // ,Pie
    } from 'react-chartjs-2'

    class ChartData extends Component {
    constructor(props) {
        super(props)
        this.state = {
            error: null,
            isLoaded: false,
            stats: [],
            matchHistory: null,
            chartData: {}
        }
    }

    componentDidMount() {
        this.getMatchHistory();
        this.getChartData();
    }

     getMatchHistory () {
        const proxyurl = "https://mysterious-wave-96239.herokuapp.com/";
        const url = "https://na1.api.riotgames.com/lol/match/v4/matchlists/by-account/" + this.props.accountId + "?endIndex=20&api_key=" +process.env.REACT_APP_SECRET_KEY;
        fetch(proxyurl + url)
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    matchHistory: result
                }
                ,console.log(result)
                );
            },
            (error) => {
                this.setState({
                    isLoaded: true,
              error: {
                  message: "Error - Something went wrong!"
                }
            });
        }
        )
    }


    getChartData(){
        this.setState({
          chartData:{
            labels: ['Zed', 'Akali', 'Nunu', 'Luxe', 'Amumu', 'Fiona', 'Yassuo'],
            datasets:[
              {
                label:'Population',
                data:[
                    8,
                    2,
                    4,
                    4,
                    1,
                    1,
                    3
                ],
                backgroundColor:[
                  'rgba(255, 99, 132, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(255, 206, 86, 0.6)',
                  'rgba(75, 192, 192, 0.6)',
                  'rgba(153, 102, 255, 0.6)',
                  'rgba(255, 159, 64, 0.6)',
                  'rgba(255, 99, 132, 0.6)'
                ]
              }
            ]
          }
        });
      }

    static defaultProps = {
        displayTitle: true,
        displayLegends: true,
        legendPosition: 'right'
    }
    
    render () {
        return (
            <div className="chart">
                <Bar
                    data={this.state.chartData}
                    options={{
                        scales: {
                            yAxes: [{
                              ticks: {
                                beginAtZero: true
                              }
                            }]
                          },
                        title: {
                        display: this.props.displayTitle,
                        text: "Most played champions in 20 games",
                        fontSize: 25
                    },
                    legend: {
                    display: this.props.displayLegend,
                    position: this.props.legendPosition
                    }
                }}
                />
            </div>
        )
         }
      }
           export default ChartData```

Answer 1

這是通過使用生命周期方法 componentDidMount() 而不是組件解決的，同時輸入 if else 語句來捕獲重新渲染的錯誤

import ChartData from './ChartData'

class Chart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            error: null,
            isLoaded: false,
            stats: [],
            matchHistory: null,
            chartData: {},
            accountId: ''
        }
    }

    

    componentDidMount = () => {
        const proxyurl = "https://mysterious-wave-96239.herokuapp.com/";
        const url = "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" + this.props.username + "?api_key=" +process.env.REACT_APP_SECRET_KEY;
        fetch(proxyurl + url)
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    stats: result,
                    accountId: result.accountId
                }
                ,console.log(`this is the users account id = ` + result.accountId));
            },
            (error) => {
                this.setState({
                    isLoaded: true,
              error: {
                  message: "Error - Something went wrong!"
                }
            });
        }
        )
    }

    

    
    render () {
    const { error, isLoaded } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else if(isLoaded) {
        return (
            <div className="chart">
            <ChartData accountId={this.state.accountId} />
            </div>
        )
        }
    }
}
export default Chart```