Я новичок в React, и у меня возникла проблема. Как перебрать массив в массиве?
мой код:
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">
<div className="lb">tags:</div>
<div className="rb">
{works.tags}
{works.tags.map(item => (
<li>{item}</li>
))}
</div>
</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[1]} все выводится правильно, но при попытке перебрать массив возникает ошибка TypeError: Cannot read property 'map' of undefined.
li
еще не забудьте доабвитьkey={}