TypeError：categories.map 不是 ReactJs 中的函数

Question

我遇到了这个错误：

TypeError: categories.map 不是函数

这是App.js：

export default function Header() {
  const [categories, setCategories] = useState([]);
    useEffect(() => {
           const loadCategories = async () => {
               let res = await API.get(endpoints['categories'])
               setCategories(res.data)
           } 

           loadCategories()
    }, []);

    return (
        <Navbar bg="light" expand="lg">
            <Container>
                <Navbar.Brand href="#home">ECoursesAPP</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="me-auto">
                    <Link className="nav-link" to="/">Trang chủ</Link>
                    {categories.map(c => <Link className="nav-link" to="#link">{c.name}</Link>)}
                </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
}

这是API.js：

import axios from "axios";

export let endpoints = {
    "categories": "/categories/"
}
    
export default axios.create({
    baseURL: "http://localhost:8000"
})

Answer 1

您应该始终在 .map 之前进行空检查以避免运行时错误

{(categories || []).map(c => <Link className="nav-link" to="#link">{c.name}</Link>)}

Answer 2

可能您的 api 端点没有返回数组，因此您可以修复它或者您可以使用类别？.map

Answer 3

在第一次渲染时，您的 categories 数组是一个空数组。所以你正在做这样的事情：

[].map(item => <p>{item.name}</p>)

当数组中没有项目时，使用点表示法获取项目值会导致问题。

有两种选择：

1. 在setState的初始化阶段添加一个默认值，例如：

const [categories, setCategories] = useState([
  {id: 0, name: "" , ...}
]);

1. 在呈现 categories 之前等待 API 响应：

{
  categories.length > 0 && categories.map(
    // rest of the codes ...
  )
}

更新

你的api.js还有另一个问题

在 Javascript 对象中，无需将 key 用引号括起来。所以把它从categories删除：

let endpoints = {
    categories : "/categories/"
}

Answer 4

嘿，根据你的错误，问题是数组在第一次渲染时不显示元素，所以如果数组存在则使用逻辑，然后数组映射数据让我告诉你

    export default function Header() {
  const [categories, setCategories] = useState([]);
    useEffect(() => {
           const loadCategories = async () => {
               let res = await API.get(endpoints['categories'])
               setCategories(res.data)

       } 

       loadCategories()
}, []);

return (
    <Navbar bg="light" expand="lg">
        <Container>
            <Navbar.Brand href="#home">ECoursesAPP</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto">
                <Link className="nav-link" to="/">Trang chủ</Link>
                {categories && categories.map(c => <Link className="nav-link" to="#link">{c.name}</Link>)}
            </Nav>
            </Navbar.Collapse>
        </Container>
    </Navbar>
)

}