reactjs - 未处理的拒绝（错误）：请求失败，状态码为 404 - Axios，React

Question

它在详细信息页面中引发错误，显示未处理的拒绝（错误）：请求失败，状态码为 404。有人可以帮我解决我做错了什么。当用户单击电影列表组件并指向详细信息页面并显示所有内容时，我基本上试图获取要打印的数据。

使用 Axios 调用 api 有什么问题？

主页.js：

import React, { Component } from 'react';
import './Home.css';
import Title from '../Title/Title';
import MovieList from '../MovieList/MovieList';
import axios from 'axios';

 class Home extends Component {

    constructor(props){
        super(props);
        this.state = {
            allMovies : [],
            crimeMovies : [],
            dramaMovies : [],
            actionMovies : []
        }
    }
     componentDidMount (){
        const token = 'Bearer Wookie2019';
         axios.get('https://wookie.codesubmit.io/movies',{
            headers: {
              'Authorization': token
            }
          }).then(response => {
            const { data: {movies} } = response;
            this.setState({
              allMovies: movies,
              crimeMovies: movies.filter(movies => movies.genres === 'Crime'),
              dramaMovies: movies.filter(movies => movies.genres === 'Drama'),
              actionMovies: movies.filter(movies => movies.genres === 'Action'),
          });
         console.log(response);
       });


     }

    render() {

        const movies = this.state.allMovies.map(movie => {
            return <MovieList key = {movie.id} title = {movie.title} poster = {movie.poster} genres = { movie.genres} />
        })
        const criMovies = this.state.crimeMovies.map(movie => {
            return <MovieList key = {movie.id} title = {movie.title} poster = {movie.poster} genres = { movie.genres} />
        })

        return (
            <div>
                <Title/>
                {movies}
                {criMovies}
            </div>

        )
    }
}

export default Home;
 

电影列表.js：

import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom';

class MovieList extends Component {
    handleClick = () => {
        const { history, movie } = this.props;
        if(history) history.push(`/Details/${this.props.slug}`);
    }
        render () {
            return (

                <div onClick = { this.handleClick}>
                    <div className="container-fluid movie-app">
                    <h5>{this.props.genres}</h5>
                        <div className =" row d-flex align-items-center mt-4 mb-4">

                            <div className ="image-container d-flex justify-content-start m-3">
                            <Link  to={`/Details/:${this.props.slug}`}>
                                    <img src={this.props.poster} alt='movie' className="imgpos"></img>
                                </Link>  
                            </div>
                        </div>
                    </div>            
                </div>
            )
        }
    }

export default withRouter(MovieList);

详细信息.js：

import React, { Component } from 'react';
import Title from '../Title/Title';
import './Details.css';
import axios from 'axios';
import Notfound from "../Notfound/Notfound";

class Details extends Component {

    state = {
        movie : []
    }
     componentDidMount (){
         const  { match } = this.props;

         const slug = match.params.slug;

        const token = 'Bearer Wookie2019';
         axios.get(`https://wookie.codesubmit.io/movies/${slug}`,{
            headers: {
              'Authorization': token
            }
          }).then(response => {
            this.setState({
                movies: response.data.movies
            })
         });


     }

    render () {

        const  { movie } = this.state;

        if (!movie){
            <Notfound/>
        }
        return (

            <div>
                <Title/>
                <div className="container">
                    <div className="row">
                        <div className ="col-md-4">
                            <img src={movie.poster} alt='movie' className="detimg"/>
                        </div>
                        <div className="col-md-8">
                            <div className="detailsTitle">
                                <strong>Title: </strong> {movie.title}
                            </div>
                            <div className="detailsInfo">
                                
                            </div>
                            <div className="detailsCast">
                                <strong>
                                    Cast:
                                </strong>
                               
                            </div>
                            <p className="detailsDesc">
                             <strong> Movie Description: </strong>
                             {movie.overview}
                            </p>
                        </div>
                    </div>

                </div>
            
            </div>
        )

    }
}

export default Details;

标签： reactjs