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

问题描述

在我的 React 应用程序中，我试图在位于主组件的侧边栏组件中呈现数据。 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,'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'

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）