我是 React 的新手,但遇到了问题。 如何遍历数组中的数组? 尝试使用 map() 方法遍历数组时,发生错误
我的代码:
import React, {useState, useEffect} from 'react';
import Header from '../modules/header/header';
import Footer from '../modules/footer/footer';
import './pages.scss';
function PageWorksItem({ match, location }) {
const { params: { id } } = match;
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [works, setItems] = useState([]);
useEffect(() => {
let cleanupFunction = false;
fetch(`http://localhost:3001/works/${id}`)
.then(res => res.json())
.then(
(result) => {
console.log(result);
setIsLoaded(true);
if(!cleanupFunction) setItems(result);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
return () => cleanupFunction = true;
}, [])
if (error) {
return <div className="works error">Error: {error.message}</div>;
} else if (!isLoaded) {
return <div className="works loading">. . .</div>;
} else {
return (
<>
<Header />
<div className="works item">
{works.tags.map(item => (
<li>{item}</li>
))}
</div>
<Footer />
</>
);
}
}
export default PageWorksItem;
JSON 片段:
{
"works": [
{
"id": 1,
"name": "21 one line SPA images",
"cat": "Illustrations",
"tags": ["one", "two", "free"]
}
]
}
如果您指定 {works.tags} 或使用索引 {works.tags[0]} - 一切正常,但如果您遍历数组,则会发生错误。
答案 0 :(得分:1)
您正在使用 works.tag.map
。但是works
的初始化值是一个空数组[]:
const [works, setItems] = useState([]);
。所以 works.tag
是 undefined
并且发生了这个错误。
您可以通过像这样添加 optional chaining
来解决此问题:
{works.tags?.map((item, index)=> (
<li key={index}>{item}</li>
))}
注意:使用key
时需要在子组件中添加唯一的map