javascript - 404错误GET bad request Rapid API React.js，从api url获取sneakerId

Question

在我的应用程序中，我使用了一个获取运动鞋信息的 api。尝试使用“getSneakerById”端点通过 id 获取运动鞋时。我想更改网址，以便能够传递sneakerId，以便我可以访问sneakerId 组件并获取运动鞋数据。在我的组件中，我使用 useEffect 从我的“api”文件中引入“getById”函数，该文件引入了数据，因此我可以将 id 添加到 url 端点的末尾。

api文件

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


}

运动鞋标识组件

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



const SneakerId = ({id}) => {
    const [sneaker, setSneaker] = useState("");

    useEffect(() => {
        const fetchData =  () => {
        api.getDataId(id).then((response) => {
            setSneaker(response.results);
            console.log(response.results);
            
          });
        };
        fetchData();
    }, [id]);
    
  

    return (
        <div className="single_sneaker_container">
            {sneaker && (
                <div className="sneaker_Description">
                    <h2>{sneaker.name}</h2>
                </div>
            )}
            
        </div>
    )
}

export default SneakerId

应用程序.js

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

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


 const App = () => {

   
       

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

export default App;

主页.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';


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">
          <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;

标签： javascriptreactjsapireact-hookshttp-status-code-404

Answer 1

嗯，首先你没有在任何地方传递你的身份证。将 ID 作为参数传递给您的组件

const SneakerId = ({id}) => { ... }

export default SneakerId

还将它作为参数传递给您的 API 请求

getDataId: (id) => {
  axios({
    method: 'GET',
    url: `https://your_host/v1/sneakers/${id}`,
    headers: {...}
  })
}