Делаю fetch данных. Ответ приходит но все равно данных на странице не вижу. В чём ошибка?

Question

[Antono__88]

import React, { useState, useEffect } from "react";
import axios from "axios";
// import CountryDetail from '../CountryDetail/Country-detail';
import Loader from '../Loader/Preloader';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
import paginationFactory from 'react-bootstrap-table2-paginator';


const FetchCountries = () => {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(false);
    const [search, setSearch] = useState("");
    const [filteredCountries, setFilteredCountries] = useState([]);

    useEffect(() => {
        setLoading(true);
        axios
            .get("https://zmag.azurewebsites.net/api/products/getallfake", {
                headers: {
                    "Content-Type": "application/json"
                }
            })
            .then((res) => {
                setProducts(res.data);
                setLoading(false);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

    if (loading) {
        return (
            <Loader />
        );
    }

    console.log(products)


    const columns = [
        {
            dataField: 'ar_codart',
            text: 'Product Names'
        }, {
            dataField: 'ar_descr',
            text: 'Product init'
        }];

    return (
        <BootstrapTable keyField="ar_codart" data={products} columns={columns} cellEdit={cellEditFactory({ mode: 'click' })} pagination={paginationFactory()} />
    );
}

export default FetchCountries;

Comments

[WbICHA]

В чём ошибка?

Даже не знаю... Реакт же не залогал саму ошибку с чётким указанием, с чем именно проблема, правда?

[Владимир]

А нахрена столько тегов добавил? Одного реакта не достаточно ?

[black1277]

Что то с модулем пажинации у вас не то. С сервера возвращается ответ в виде объекта, а вам требуется в виде массива (вот тут как я понимаю data={products} )

Answer 1

[Владимир]

Тебе написали ошибку красным по черному
products должен быть массивом, а ты туда сандалишь объект.
Поставь дебаг и посмотри структуру обхекта и в каком месте данные лежат.
У тебя приходит в data такая структура {total, data, startQuery, endQuery}

Comments

[sinneren]

но по запросу-то даже на крине видно, что у него там res.data Array и по умолчанию пустой []

[black1277]

на скрине видно, что с сервера пришел ответ в виде объекта - самая первая строчка

[Владимир]

sinneren, Я показал структуру res.data которая приходит. Не уверен откуда и что вам видно

[sinneren]

Владимир, а, да, ему надо простоres.data.dataсделать
Antono__88 И setLoading(false); в catch не забудьте добавить

[Antono__88]

sinneren, setLoading(false) это я делаю. Сейчас попробую с res.data.data

[Antono__88]

sinneren, работает спасибо огромное. У меня просто не богатый опыт с js так что учусь как могу)

[sinneren]

Antono__88, делаете в then, а не catch. если у вас при запросе вылезет ошибка, то прелоадер не остановится без его отключения в catch

[Владимир]

Antono__88,

У меня просто не богатый опыт с js так что учусь как могу)

Читайте книжки, чтобы посмотреть структуру входящих данных много опыта не нужно