我有這個錯誤：
型別錯誤：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"
})
uj5u.com熱心網友回復：
您應該始終在 .map 之前進行空檢查以避免運行時錯誤
{(categories || []).map(c => <Link className="nav-link" to="#link">{c.name}</Link>)}
uj5u.com熱心網友回復：
可能你的 api 端點沒有回傳一個陣列，所以你可以解決這個問題，或者你可以使用類別？.map
uj5u.com熱心網友回復：
在第一次渲染時，您的categories陣列是一個空陣列。所以你正在做這樣的事情：
[].map(item => <p>{item.name}</p>)
當陣列中沒有專案時，使用點表示法獲取專案值會導致問題。
有兩種選擇：
- 在初始化階段添加一個默認值 on
setState，例如：
const [categories, setCategories] = useState([
{id: 0, name: "" , ...}
]);
- 在渲染之前等待 API 回應
categories：
{
categories.length > 0 && categories.map(
// rest of the codes ...
)
}
更新
你的還有一個問題 api.js
在 Javascript 物件中，不需要key用引號將 括起來。所以從categories：
let endpoints = {
categories : "/categories/"
}
uj5u.com熱心網友回復：
嘿根據你的錯誤問題是陣列在第一次渲染時不顯示元素所以你使用邏輯如果陣列存在然后陣列映射資料讓我告訴你
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>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/342379.html