0

Я новичок в 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.

5
  • ошибка не пропала {works && works.tags.map(item => ( <li>{item}</li> ))}
    – MKTF
    Commented 29 апр. 2021 в 12:47
  • к сожалению без изменений {works[0] && works[0].tags.map(item => ( <li>{item}</li> ))} вот так ошибка пропадает но и ничего не выводится
    – MKTF
    Commented 29 апр. 2021 в 12:53
  • был бы признателен, если бы вы подсказали как написать :)
    – MKTF
    Commented 29 апр. 2021 в 12:57
  • выводит TypeError: Cannot read property 'tags' of undefined а вот console.log(works.tags) выводит нужный массив, но при попытке перебрать все ломается
    – MKTF
    Commented 29 апр. 2021 в 13:02
  • очень странно.. для li еще не забудьте доабвить key={}
    – entithat
    Commented 29 апр. 2021 в 13:13

2 ответа 2

1

У вас works массив. И из массива вы хотите извлечь массив - так не работает. По индексам у вас работает потому что вы достаете с определенного элемента массива массив tags; У вас неправильная структура; works должен быть обьектом, если вы хотите так парсить:

   {works.tags.map(item => (
                            <li>{item}</li>
                        ))}

Вы можете деструктурировать массив(но эта не лучшая практика, я это называю костылем):

const [{tags}] = works;

И далее:

    {tags.map(item => (
                            <li>{item}</li>
                        ))}
2
  • Вы можете просто сделать так works.find((item) => Array.isArray(item.tags));
    – dev_event
    Commented 29 апр. 2021 в 13:24
  • Он вернет обьект. Прошу учесть, что если works будет иметь больше одно обьекта, то нужно смотреть структуру json.
    – dev_event
    Commented 29 апр. 2021 в 13:25
0

я задал этот же вопрос на основном stackoverflow и мне помог этот ответ:

{works.tags?.map((item, index)=> (
   <li key={index}>{item}</li>
))}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.