javascript - Reactjs 错误 : Uncaught (in promise) Error: Request failed with status code 401

Question

其实我在做 Twitch 电视仪表板 在 react.js 按照本教程https://www.youtube.com/watch?v=VTY6ZzDTV3A&t=197s
一切正常，但我的 twitch api 不起作用，请有人帮我解决这个错误。
这是我的控制台中显示的错误:

Uncaught (in promise) Error: Request failed with status code 401
    createError createError.js:16
    settle settle.js:17
    handleLoad xhr.js:61
createError.js:16
    fetchData Games.js:30
    AsyncFunctionThrow self-hosted:697

这是我正在处理的代码，如下所示:
Games.js:

import React, { useState, useEffect } from "react";
import api from "../api";
import { Link } from "react-router-dom";


function Games() {

    const [games, setGames] = useState([]);

    useEffect(() => {

        const fetchData = async () => {
    const result = await api.get("https://api.twitch.tv/helix/games/top");
      
         // console.log(result.data);

         let dataArray = result.data.data;
         let finalArray = dataArray.map(game => {
            let newURL = game.box_art_url
          .replace("{width}", "300")
          .replace("{height}", "300");

          game.box_art_url = newURL;
 


         })

         setGames(result.data.data);

    };

    fetchData();

    });

    return (
        <div>

    <h1>Most Popular Games</h1>
       
       <div className="row">

    {games.map(game => (
        <div className='col-4'>

        <div className='card'>
          <img className="card-img-top" src={game.box_art_url} />
              <div className="card-body">
                <h5 className="card-title">{game.name}</h5>
                <button className="btn btn-success">
                  <Link
                    className="link"
                    to={{
                      pathname: "game/" + game.name,
                      state: {
                        gameID: game.id
                      }
                    }}
                  >
                    {game.name} streams{" "}
                  </Link>
                </button>
              </div>


        </div>  

        </div>

        ))}

        </div>

    </div>

);

}

export default Games;

除此之外，这是我的 api.js 文件，我添加了 twitch tv api id:

import axios from 'axios';


let api = axios.create({
    headers: {
         "Client-ID": '4mfy053h9jf3zqwy3fh1pi55oadib1'
    }

});

export default api;

Answer 1

重新启动您的 React 服务器开发，以便将 header 发送到远程服务器