加载资源失败：服务器响应状态为 429 (Too Many Requests) React.js API答案

【问题标题】：Failed to load resource: the server responded with a status of 429 (Too Many Requests) React.js API加载资源失败：服务器响应状态为 429 (Too Many Requests) React.js API
【发布时间】：2021-07-12 16:31:23
【问题描述】：

在我的反应应用程序中，我试图在我的侧边栏组件中呈现数据，该组件位于主组件中。 home 组件显示来自 api 的鞋子列表，速率限制为 100，但我降低了速率限制，以便在侧边导航时呈现存储在数组中的鞋品牌列表。当我加载页面时，侧面导航会显示品牌列表，但鞋子列表没有显示，并且控制台会记录 429 错误。我已经尝试降低鞋子列表的速率限制，但错误仍然存在。有谁知道我如何同时渲染两种数据？

home.js

import React, {useState, useEffect} from "react";
import api from '../api';
import '../stylesheets/shoeList.css';
import placeholder from '../images/cooming.jpeg'
// import Navbar from '../components/Navbar';
// import SearchBar from '../components/SearchBar';
import SingleSneaker from './SingleSneaker';
import SideBarNav from './SideBarNav'

const Home = () => {
// const [data, SetData] = useState([]);
  const [sneakers, setSneakerData] = useState([]);

  const [filtered, setFiltered] = useState([]);
  const [result, setResult] = useState("");

  useEffect(() => {
    const fetchData = () => {
      api.getData().then((response) => {
        setSneakerData(response.data.results);
        setFiltered(response.data.results);
        console.log(response.data.results);
        
      });
    };

    fetchData();
  }, []);

  useEffect(() => {
      const results = filtered.filter(sneaker=> sneaker.shoe.toLowerCase().includes(result));
      setSneakerData(results);
      
    
  },[result]);

  const onChange =(e)=> {
    setResult(e.target.value);
}

  return (
    <div className="sneakerList-container">
        <SideBarNav />
          <div className="searchBar__container">
            <div className="searchBar_field">
                <div className="searchText_phrase">
                <h3>Search shoes <span className="color">below</span></h3>
                </div>
                <div className="search_input">
                    <input type="text" placeholder="Search..." value={result} onChange={onChange}/>
                </div>
            </div>
            
        </div>
      
      {sneakers && (
        <div className="sneakerlist">
          {sneakers.map((sneaker) => {
            return (
                <SingleSneaker key={sneaker.id} id={sneaker.id} name={sneaker.name} shoe={sneaker.shoe} img={sneaker.media.imageUrl}/>
          
            );
          })}
        </div>
      )}
    </div>
  );
};

export default Home;

sideNav.js

import React, { useState, useEffect}from 'react';
import '../stylesheets/SideNav.css';
import api from '../api';
import {Link } from 'react-router-dom';

 const SideBarNav = () => {
    const [brands, setBrands]= useState([]);
   
    useEffect(() => {
        const fetchData = () => {
            api.getBrand().then((response)=>{
                setBrands(response.data.results);
                console.log(response.data.results);
            });
        };

        fetchData();
    }, [])
   


   
    return (
        <div style={sideNavStyle}>
           { brands && (
               <div className="brand-bocx">
                   {brands.map((brand)=>{
                       return (
                           <div style={color}>
                               <h3>{brand}</h3>
                           </div>
                       )
                   })}
               </div>
           )}
        </div>
    )
}

const sideNavStyle = {
    height: "100vh",
    width: "250px",
    background: "#fff",
    top: "60vh",
    position: "absolute",
    borderRight: " 1px solid #eee",
    left: 0,
    textAlign: "left",
    zIndex: 1
};

const color = {
    color: "#111",
    fontSize: "32px",
    fontFamily: "Source Sans Pro"
}

export default SideBarNav;

API.js

import axios from "axios";

const API_KEY = process.env.RAPID_API_KEY
export default {

getData: () =>
axios({
  method: 'GET',
  url: 'https://v1-sneakers.p.rapidapi.com/v1/sneakers',
  params: {limit: '20'},
  headers: {
    'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
    'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
  }

}),

getDataId: (id) => 
  axios({
    method: 'GET',
  url: 'https://v1-sneakers.p.rapidapi.com/v1/sneakers/' + id,
  headers: {
    'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
    'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
  }
  }),

  getBrand: () =>
    axios({
      method: 'GET',
      url: 'https://v1-sneakers.p.rapidapi.com/v1/brands',
      headers: {
        'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
        'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
      }
    })
  


}

// f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a'

【问题讨论】：

标签： reactjs api use-effect rate-limiting http-status-code-429

【解决方案1】：

我在 RapidAPI Hub 上检查了这个 API，它允许您每天进行 200 次 API 调用。

params: {limit: '20'}, 限制服务器返回的运动鞋数量，而不是 API 调用。

我认为您已经拨打了 200 次电话 - 这就是为什么它会显示 429 Too many requests。

您可以使用RapidAPI developer dashboard 查看您拨打了多少电话。

【讨论】：