未处理的拒绝（错误）：请求失败，响应中的状态码为 404答案

【问题标题】：Unhandled Rejection (Error): Request failed with status code 404 in react未处理的拒绝（错误）：请求失败，响应中的状态码为 404
【发布时间】：2021-07-26 13:52:59
【问题描述】：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const Api = () => {
    const [num, setNum] = useState();

    useEffect(() => {
        async function getData() {
            const res = await axios.get(`https://pokeapi.co/api/v2/pokemon/${num}`);
            console.log(res.data.name);
        }
        getData();
    })
    return (
        <>
            <h1>You Choose {num} value</h1>
            <select value={num} onChange={(event) => {
                setNum(event.target.value)
            }}>
                <option value="1">1</option>
                <option value="23">23</option>
                <option value="34">34</option>
                <option value="25">25</option>
                <option value="12">12</option>
                <option value="4">4</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="34">34</option>
                <option value="20">20</option>
            </select>
        </>
    )
}


export default Api;

【问题讨论】：

标签： reactjs api axios

【解决方案1】：

您的 API 返回 404，因为 num 未定义。执行时，代码会调用https://pokeapi.co/api/v2/pokemon/undefined

你可以做些什么来解决它：

给 num 一个初始值：const [num, setNum] = useState(1);
调用 API 时捕获错误。
与您的问题无关，但您必须在函数useEffect 中添加第二个参数：当第二个参数更改时，执行第一个参数。

看看这个沙盒：https://codesandbox.io/s/youthful-pascal-vxq65

【讨论】：