我的 React 组件在尝试获取 api 数据时呈现 404 错误？反应，Axios，API答案

【问题标题】：my React component renders a 404 error when trying to GET the api data? React, Axios, Api我的 React 组件在尝试获取 api 数据时呈现 404 错误？反应，Axios，API
【发布时间】：2021-07-21 07:02:46
【问题描述】：

当尝试渲染我的 api 数据以列出 api 中的所有品牌时，控制台显示 404 错误“GET https://v1-sneakers.p.rapidapi.com/v1/sneakers/brands 404 (Not Found)”，当我在不同的组件中使用此端点时它起作用了。但我决定让它成为自己的页面。我正在使用“useEffect”来呈现 api 数据。我不确定这是我设置路由的方式还是我获取数据的方式。

品牌.js


import React, {useEffect, useState} from 'react';
import api from '../api';
// import axios from "axios";

const Brand = () => {

    const [brands, setBrands]= useState([]);

    

  useEffect(() => {
      const fetchData = () => {
          api.getBrand().then((response)=>{
              setBrands(response.data.results);
              console.log(response.data.results);
          });
      };

      fetchData();
  }, [])

    
    return (
        <div className="brand-container">
        {/* {brands && (
            <ul className="brand_list">
                {brands.map((brand)=>{
                    return(
                    <li>{brand.shoe}</li>
                    )
                })}
            </ul>
        ) } */}
            
        </div>
    )
}


export default Brand;

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: '24'},
  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'

App.js

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useParams} from 'react-router-dom';

import Home from './components/Home'; 
import SearchBar from './components/SearchBar';
import Navbar from './components/Navbar';
import SneakerId from './components/SneakerId';
import About from './components/About'
import Brand from './components/Brand'


 const App = () => {


    return (
        <Router>
                    <Navbar />
            <Switch>
                <Route exact path="/about" component={About} />
                <Route exact path="/">
                   
                    <Home />
                </Route>
                <Route exact path="/:id">
                <SneakerId  />
                </Route>
                <Route exact path="/brands" component={Brand}/>
               
               
                
                
            </Switch>
        </Router>
    )
}

export default App;

【问题讨论】：

标签： reactjs api http-status-code-404 use-effect

【解决方案1】：

我已经在 RapidAPI Hub 上检查了这个 API，并且没有带有 https://v1-sneakers.p.rapidapi.com/v1/sneakers/brands URL 的端点。相反，您应该使用https://v1-sneakers.p.rapidapi.com/v1/brands 端点，我相信。

【讨论】：

【解决方案2】：

您可以使用Postman 之类的工具来确保它是 API 或您的代码。如果您输入所有凭据并在此处获得正确响应，但在您的应用程序中没有，至少您知道数据来自 API。

您是否尝试在 getDataId 函数中记录 id 以查看值是否通过？

【讨论】：