未捕獲（承諾）錯誤：轉到組態檔時請求失敗，狀態碼為404

使用 API github 時存在這樣的問題。轉到個人資料時我無法獲取資料，但搜索時一切正常。我不理解為什么

出現這個錯誤

在此處輸入圖片說明

嘗試顯示用戶資料時，但搜索時不會出現此類錯誤

在此處輸入圖片說明

當我去個人資料時

在此處輸入圖片說明

代碼

import React from 'react'
import { Link, useParams } from 'react-router-dom';
import { useContext, useEffect, Fragment } from 'react';
import { GithubContext } from '../context/github/githubContex';

export const Profile = () => {

    const {getUser, getRepos, loading, user, repos} = useContext(GithubContext)
    const urlName = useParams()


    useEffect(() => {
        getUser(urlName)
        getRepos(urlName)

        console.log('Effect');
    },[])

    if (loading) {
        return <p className='text-center'>Загрузка...</p>
    }   

    const {
        name, company, avatar_url,
        location, bio, blog, 
        login, html_url, followers,
        following, public_repos, publick_gists

    } = user


    return(
        <Fragment>
            <Link to='/' className='btn btn-link'> На головну</Link>

            <div className='card mb-4'>
                <div className='card-body'>
                    <div className='row'>
                        <div className='col-sn-3 text-center'>
                            <img src={avatar_url} alt={name}></img>
                            <h1>{name}</h1>
                            {location && <p>М?сце знаходженя: {location} </p>}
                        </div>
                        <div className='col'>
                            {
                                bio && <Fragment>
                                    <h3>BIO</h3>
                                    <p>{bio}</p>
                                </Fragment>
                            }
                            <a 
                                href={html_url}
                                target="_blank"
                                rel="noopener noreferrer" 
                                className='btn btn-dark'
                            >В?дкрити проф?ль</a>
                            <ul>
                                {login && <li>
                                    <strong>Username: </strong> {login}
                                </li> }

                                {company && <li>
                                    <strong>Компания: </strong> {login}
                                </li> }


                                {blog && <li>
                                    <strong>Website: </strong> {login}
                                </li> }
                                
                                <div className='badge badge-primary'>
                                    П?дписники: {followers}
                                </div>

                                <div className='badge badge-success'>
                                    П?дписаний: {following}
                                </div>

                                <div className='badge badge-info'>
                                    Репозитор?й: {public_repos}
                                </div>

                                <div className='badge badge-dark'>
                                    Gists: {publick_gists}
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )


}

import React, {useReducer} from "react"
import axios from 'axios'
import { CLEAR_USERS, GET_REPOS, GET_USER, SEARCH_USERS, SET_LOADING } from "../types"
import { GithubContext } from "./githubContex"
import { githubReducer } from "./githubReducer"

const CLIENT_ID = process.env.REACT_APP_CLIENT_ID
const CLIENT_SECRET = process.env.REACT_APP_CLIENT_SECRET 

const withCreads = url => {
    return `${url}client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}`
}

// console.log(CLIENT_ID, 'asd', CLIENT_SECRET)

export const GithubState = ({children}) => {
    const initialState = {
        user: {},
        users: [],
        loading: false,
        repos: []
    }
    const [state, dispatch] = useReducer(githubReducer, initialState)

    const search = async value => {
        setLoading()

        const response = await axios.get(
           withCreads(`https://api.github.com/search/users?q=${value}&`)
        )

        dispatch({
            type: SEARCH_USERS,
            payload: response.data.items
        })
    }

    const getUser = async name => {
        setLoading()

        const response = await axios.get(
            withCreads(`https://api.github.com/users/${name}?`)
        )

        console.log('name', name)

        dispatch({
            type: GET_USER,
            payload: response.data
        })
    }

    const getRepos = async name => {
        setLoading()

        const response = await axios.get(
            withCreads(`https://api.github.com/users/${name}/repos?per_page=5&`)
        )

        dispatch({
            type: GET_REPOS,
            payload: response.data
        })
    }

    const clearUsers = () => dispatch({type: CLEAR_USERS})
    
    const setLoading = () => dispatch({type: SET_LOADING})

    const {user, users, repos, loading} = state

    return (
        <GithubContext.Provider value={{
            setLoading, search, getUser, getRepos, clearUsers,
            user, users, repos, loading
        }}>
            {children}
        </GithubContext.Provider>
    )
}

uj5u.com熱心網友回復：

您將一個物件傳遞給getUser而不是string，因此您應該將其urlName作為 的屬性獲取useParams。

const { urlName } = useParams()

您還需要將key/value屬性傳遞給路由組件的子級，如下所示：

// set param with unique name to route's path
<Route path="/user/:urlName" />

// access the 'key/value' params after transition to the route component inside it's children
const {urlName} = useParams()

通過這種方式，如果您想擁有動態路由路徑，您可以:urlName 為您的Link組件設定任何值，例如：

const userName = "Johb"
<Link to={`/user/${userName}`}

標籤：javascript 反应 接口 github

上一篇：操作后Git鎖檔案保留

下一篇：錯誤未能將一些參考推送到gitcommit