React Hooks用REST API返回的JSON生成Dropdown时map报错如何解决

核心错误原因 #

• team 是 useState 声明的数组状态，不是 useRef 对象，不需要加 .current 访问，直接调用 team.map 即可
• 注释中 this.state.team 是类组件语法，函数组件不存在 this 实例，无法通过该方式访问状态
• 原代码 map 回调参数使用错误，第一个参数为数组单条数据，第二个为索引，且接口返回字段为 name 而非自定义的 mannschaftsname
• 组件 return 内容存在多个并列根节点，违反 React JSX 语法要求，需要用单个根节点包裹
• 列表渲染未加唯一 key 属性，会触发 React 性能警告

修复后完整代码 #

import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import axios from 'axios'

function Navbar() {
    const [team, setTeam] = useState([]);
    const history = useHistory(); // 未使用的变量可保留或删除

    useEffect(() => {
        getTeams()
    }, []);

    const getTeams = () => {
        axios
            .get(`${process.env.REACT_APP_API_URL}/team/all`, {})
            .then((res) => {
                console.log(res.data);
                // 加一层类型校验，避免接口返回非数组类型导致map报错
                if(Array.isArray(res.data)) {
                    setTeam(res.data)
                } else {
                    setTeam([])
                }
            })
            .catch((error) => {
                console.log(error)
            })
    }

    return (
        // 用空标签包裹并列节点作为唯一根节点
        <>
            <p className="navbar-item">Mannschaften</p>
            <div className="navbar-dropdown">
                {team.map((obj) => (
                    <a className="navbar-item" key={obj.id} href={`/team/${obj.id}`}>{obj.name}</a>
                ))}
                <a className="navbar-item" href="/login">Test</a>
            </div>
        </>
    );
}
export default Navbar;

内容的提问来源于stack exchange，提问作者Mr. Hankey