Question

我正在尝试为正在研究的League of Legends 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（）而不是component来解决的，并输入了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```

多个提取API调用返回错误403（第二个API调用未运行）

1 个答案: