Axios 未定义响应

Question

我正在开发 MERN 堆栈项目。问题是当我进行第一个 API 调用时，第一个响应是未定义的，并且 map 函数给出错误“地图不是函数，它是有意义的。问题是我尝试了几种方法来防止这种情况发生，但它不起作用

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import axios, { Axios } from "axios"
import { useState, useEffect } from "react";
import '../index.css'

function SearchResults() {
    const [searchValues, setSearchValues] = useState({})
    useEffect(() => {
        receivedata();
    }, [searchValues])

    const receivedata = async () => {
        await axios.get('http://localhost:3001/getresults').then((response) => {
            setSearchValues(response.data)
            console.log(searchValues);
            console.log("holaaaa")
            console.log(searchValues.length)
        }).catch(err => {
            console.log(err)
            console.log("i am here")

        })
    }

    return (
        <SearchDisplay></SearchDisplay>
    );

    function SearchDisplay() {
        return (
            <div>

                { searchValues.length !== 0 || typeof searchValues != undefined ? searchValues.map(flight => {
                    return <div className="flights">
                        <ul >
                            <li>Flight Number : {flight.FlightNumber} </li>
                            <li>Arrival Time : {flight.ArrivalTime} </li>
                            <li> Departue Date : {flight.DepartureDate} </li>
                            <li> Arrival Terminal : {flight.ArrivalTerminal} </li>
                            <li> Departure Terminal : {flight.DepartureTerminal} </li>
                            <li> Economy Seats : {flight.EconomySeats}</li>
                            <li> Business Class Seats : {flight.BusinessClassSeats}</li>
                            <li>Airport : {flight.Airport}</li>
                            <li>Arrival Terminal : {flight.ArrivalTerminal}</li>
                        </ul>
                    </div>

                }) : <h1>No Results Found</h1>
                }



            </div>

        )
    }
}



export default SearchResults;

这是组件的代码

Answer 1

改变

    const [searchValues, setSearchValues] = useState({})

到

    const [searchValues, setSearchValues] = useState([])

您没有将状态设置为加载时的数组