MERN项目Axios首次请求返回undefined引发map不是函数报错如何解决

问题根因 #

• 初始状态类型错误：searchValues 初始值被设置为空对象{}，只有数组才拥有map方法，首次渲染时API请求还未返回，直接对空对象调用map必然触发报错。
• useEffect依赖配置错误：将searchValues设为依赖项会导致每次更新searchValues时重新触发数据请求，陷入无限请求死循环。
• 条件判断逻辑错误：使用||逻辑符、typeof判断写法错误，没有优先校验变量是否为数组，导致初始状态下依然会执行map调用。
• state更新是异步操作：setSearchValues执行后立刻打印searchValues拿到的是更新前的旧值，属于React正常机制，不代表数据请求失败。

修复方案 #

1. 把searchValues的初始值改为空数组[]
2. 把useEffect的依赖项改为空数组[]，仅在组件首次挂载时触发数据请求
3. 修正渲染条件判断，优先校验searchValues是数组且长度大于0再执行map
4. 额外补充循环项唯一key、后端返回格式兼容的防御性代码

修正后代码 #

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

function SearchResults() {
    // 初始值改为空数组
    const [searchValues, setSearchValues] = useState([])
    // 依赖项改为空数组，仅首次挂载请求
    useEffect(() => {
        receivedata();
    }, [])

    const receivedata = async () => {
        try {
            const response = await axios.get('http://localhost:3001/getresults')
            // 兼容后端返回格式，确保赋值的一定是数组
            setSearchValues(Array.isArray(response.data) ? response.data : [])
        } catch(err) {
            console.log(err)
            setSearchValues([])
        }
    }

    return (
        <SearchDisplay></SearchDisplay>
    );

    function SearchDisplay() {
        return (
            <div>
                {/* 先判断是数组且长度大于0再执行map */}
                { Array.isArray(searchValues) && searchValues.length > 0 ? searchValues.map(flight => {
                    // 给循环项加唯一key，避免React报警告
                    return <div key={flight.FlightNumber} 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;

内容的提问来源于stack exchange，提问作者Mido Ashraf