Блог

Главная - Вопросы по программированию - Реагировать показывать данные из массива объектов

Реагировать показывать данные из массива объектов

#javascript #reactjs #api #frontend

Вопрос:

Сегодня я сделал полезный крюк, чтобы получить все данные из определенной категории. Как вы можете видеть на изображении, все данные можно просмотреть в формате JSON. Также вы можете видеть, что он находится в массиве объектов. Мне было интересно, как я могу показать эти данные в обычном формате, как на странице. Большую часть времени я получаю ошибку data.name НОЛЬ. Но, как вы можете видеть, данные на изображении правильно извлечены в формате JSON. Я просто не понимаю, как обычно показывать все эти данные. Есть какие-нибудь предложения?

введите описание изображения здесь

введите описание изображения здесь

 import React from "react";
import "../Style/menu.css";
import { useParams, withRouter } from "react-router-dom";
import useFetch from "../ApiService/useFetch";
import { render } from "@testing-library/react";

const Product = () => {

    const { id } = useParams();
    const { data, error, isPending } = useFetch("http://localhost:8080/products/category/"   id);

        return (
            <p>{JSON.stringify(data)}</p>
        )
}

export default Product;
 
 import { useState, useEffect } from "react";

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [isLoading, setIsPending] = useState(true);
    const [error, setError ] = useState(null);


useEffect(() => {
        fetch(url) //custom url so you can reuse it
        .then(res => {
            if(!res.ok) {
                throw Error('could not fetch data');
            }
            return res.json();
        })
        .then(data =>  {
            setData(data);
            setIsPending(false)
            setError(null)
        })
        .catch(err => {
            setError(null)
            setIsPending(false)
        })
    }, [url]);

    return {data, isLoading, error} //use properties with custom hook
}

export default useFetch;

Комментарии:

1. Добавьте console.log(data) непосредственно перед return входом useFetch и посмотрите, что он показывает на консоли

2. Это дает мне массив всех объектов, которые мне нужно отобразить! Также я добавил фотографии

3. Вы хотите сказать, что не знаете, как отобразить это в HTML? Для этого есть документы с примерами .

4. Что будет на выходе, если вы не перейдете data к JSON.stringify ? Вероятно, вы будете получать обычный массив, поэтому можете map использовать этот массив и визуализировать его любым удобным для вас способом.

5. это : Неперехваченная ошибка: Объекты недопустимы в качестве дочернего элемента React (найдено: объект с ключами {идентификатор, имя, описание, аллергия, цена}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив.

Ответ №1:

Это может быть полезно для вас

 ...

const Product = () => {

    const { id } = useParams();
    const { data, error, isPending } = useFetch("http://localhost:8080/products/category/"   id);

        return (
            { data amp;amp; data.length amp;amp;
                data.map((row) =>{
                  <p>row.name</p>
                })
            }
        )
}

...

Ответ №2:

ваш useFetch асинхронен, как я вижу, переменная isPending, почему бы вам не использовать это ?

 const { id } = useParams();
const { data, error, isPending } = useFetch("http://localhost:8080/products/category/"   id);


    return (
        <p>{isPending ? null : JSON.stringify(data)}</p>
    )
Метки: