如何在 React 中使用 Riot API：获取 JSON 数据的逐步教程

2024-03-02 22:57:15

React 中使用 Riot API：获取 JSON 数据的循序渐进指南

导言

释放 Riot Games 游戏数据的强大力量，通过 Riot API 获取实时信息。本指南将循序渐进地指导你使用 React 集成 Riot API，以便轻松获取 JSON 响应并丰富你的应用程序。

第 1 步：安装必备组件

首先，使用 npm 安装 Axios，这是一个 HTTP 客户端库：

npm install axios

第 2 步：创建 React 组件

现在，创建一个 React 组件，如 SummonerInfo.js，以处理 API 集成：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

// 召唤师信息组件
const SummonerInfo = () => {
  // 使用状态管理数据
  const [summoner, setSummoner] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  // 组件加载时获取召唤师信息
  useEffect(() => {
    const fetchSummoner = async () => {
      try {
        // 从 Riot API 获取 JSON 响应
        const response = await axios.get(
          `https://eun1.api.riotgames.com/lol/summoner/v3/summoners/by-name/EvilDex?api_key=<YOUR_API_KEY>`
        );
        setSummoner(response.data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchSummoner();
  }, []);

  // 显示加载、错误或召唤师信息
  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h1>{summoner.name}</h1>
      <p>Level: {summoner.summonerLevel}</p>
      <p>Profile Icon ID: {summoner.profileIconId}</p>
    </div>
  );
};

export default SummonerInfo;

第 3 步：使用你的 API 密钥

别忘了将 <YOUR_API_KEY> 替换为你的实际 Riot Games API 密钥。

第 4 步：呈现组件

在 React 应用程序中，呈现 SummonerInfo 组件以查看 JSON 响应：

import SummonerInfo from './SummonerInfo';

// 应用入口
const App = () => {
  return (
    <div>
      <SummonerInfo />
    </div>
  );
};

export default App;