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

Question

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;

标签： reactjsapiaxios

Answer 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