Сопоставление массива Json внутри Json React

ProgramBox

Сопоставление массива Json внутри Json React

Post author:admin
Запись опубликована:23 марта, 2023
Post category:Вопросы по программированию

#reactjs

Вопрос:

У меня есть файл JSON ниже. Внутри этого JSON есть массив (ответы). Я хочу нанести их на карту и визуализировать.

     {
    "qID": "177",
    "myQuestion": true,
    "qContent": "testing",
    "answers": [{
            "anonymous": true,
            "aID": "184",
            "aContent": "test",
            "aDate": "Mon, 14 Sep 20 06:47:38  0000",
            "myAnswer": false,
            "authorName": "abc",
            "aFeaturedImg": "../uploads/407378vk053.jpg",
            "authorImg": "https://lh3.googleusercontent.com/a-/AOh14GjhhO-11Wktws9-FXBZoWk3vT8tRM2Sy7IQ4cnpw=s96-c"
        },
        {
            "anonymous": true,
            "aID": "184",
            "aContent": "test",
            "aDate": "Mon, 14 Sep 20 06:47:38  0000",
            "myAnswer": false,
            "authorName": "abc",
            "aFeaturedImg": "../uploads/407378vk053.jpg",
            "authorImg": "https://lh3.googleusercontent.com/a-/AOh14GjhhO-11Wktws9-FXBZoWk3Cv8tRM2Sy7IQ4cnpw=s96-c"
        }
    ]
}

мой код реакции выглядит следующим образом. Я хочу использовать состояние

функциональный вопрос ({ совпадение }) {

 useEffect(() => {
    fetchItem();
}, []);

const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ qID: match.params.id })
};

const [item, setItem] = useState([]);



const fetchItem = async () => {
    const data = await fetch('https://example.com/api/getAnswer.php' , requestOptions);
    const item = await data.json();
    setItem(item);
    
         
};  


return (        
    <Container maxWidth="sm">
         
         {item.answers.map(answer => (
         <Card key={answer.qID}>{answer.qContent}</Card>
    ))}           
    </Container>
);

}

экспортируйте вопрос по умолчанию; Но это не сработает. Это выдает следующую ошибку

 TypeError: Cannot read property 'map' of undefined

Ответ №1:

Если вы не уверены, что answers ключ ваших данных будет рассматриваться в виде массива, вы можете сформировать javascript для рассмотрения его таким образом, передав его через Array.from

 let data = {
"qID": "177",
"myQuestion": true,
"qContent": "testing",
"answers": [{
        "anonymous": true,
        "aID": "184",
        "aContent": "test",
        "aDate": "Mon, 14 Sep 20 06:47:38  0000",
        "myAnswer": false,
        "authorName": "abc",
        "aFeaturedImg": "../uploads/407378vk053.jpg",
        "authorImg": "https://lh3.googleusercontent.com/a-/AOh14GjhhO-11Wktws9-FXBZoWk3vT8tRM2Sy7IQ4cnpw=s96-c"
    },
    {
        "anonymous": true,
        "aID": "184",
        "aContent": "test",
        "aDate": "Mon, 14 Sep 20 06:47:38  0000",
        "myAnswer": false,
        "authorName": "abc",
        "aFeaturedImg": "../uploads/407378vk053.jpg",
        "authorImg": "https://lh3.googleusercontent.com/a-/AOh14GjhhO-11Wktws9-FXBZoWk3Cv8tRM2Sy7IQ4cnpw=s96-c"
    }
]
}

class App extends React.Component {
    render(){
        let answers = Array.from(data.answers)
        
        return (<div>
            {answers.map(ans => {
                return <p>{ans.aContent}</p>
            })}
        </div>)
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Поскольку item состояние может быть пустым массивом до того, как вы получите данные из API, вы можете проверить его доступность перед выполнением map подобным образом

 return (        
    <Container maxWidth="sm">     
        {item.answers amp;amp; item.answers.map(answer => (
             <Card key={answer.qID}>{answer.qContent}</Card>
        ))}           
    </Container>
);

{item.answers amp;amp; item.answers.map(answer => (...))} это похоже на проверку item.answers выхода перед выполнением map над массивом ответов

1. Большое вам спасибо за быстрый ответ. Я хочу реализовать это с помощью state. Я изменил свой вопрос. вы можете мне помочь?

2. Вы хотите, чтобы ответ был сохранен в состоянии вашего компонента и отображал answers массив, который хранится в состоянии вашего компонента

3. Привет. Я попробовал следующее. Но все равно выдает ошибку. [код]const fetchItem = async () => { const data = ожидание выборки(‘ sith.lk/api/getAnswer.php ‘ , RequestOptions); const item = await data.json(); setItem(элемент); const answers = Array.from(элемент.ответы); setAnswers(ответы); }; return ( <Максимальная ширина контейнера=»sm»> {ответы.карта(ответ => ( <Ключ карты={ответ.qID}>{ответ. qContent}</Card> ))} </Container> );

4. Данные, которые вы предоставляете в вопросе, — это способ получения ответа от вызова API

Ответ №2:

вам нужно проверить, содержит ли «элемент» допустимое значение

 {item amp;amp; item.answers.map(answer => (
             <Card key={answer.aID}>{answer.aContent}</Card>
        ))}

1. Привет. Спасибо за ваш ответ. Но это не работает.

2. попробуйте подключить элемент в useEffect useEffect(() => { fetchItem(); }, [элемент]);

3. вы также пытались consol.log (item) внутри fetchItem? чтобы убедиться, что у вас есть правильные данные

Ответ №3:

Вам нужно разобрать ваш JSON в объект javascript, попробуйте сделать это

 let parsed_object = JSON.parse(item);

И затем вы можете использовать map на parsed_object .