Как реализовать текстовую строку перед загрузкой основного массива?

Question

[lookingfor2]

Мне нужно чтобы перед загрузкой массива объктов с данными операций пользователя ему отображалось "Идет загрузка данных",
на данный момент, изначально я храню в переменной состояния пустой массив, передаю его в компонент, откуда перебираю данные, до того как я получу все данные, нужна текстовая информация, еще сам массив в итоге может быть пустым, и мне необходимо будет вывести "У вас не было операций"

xport default function App() {
    const [operationsLoan, setOperationsLoan] = useState([] );

    useEffect(() => {
            apiGetOperationsLoan()
                .then((response) => {
                    setOperationsLoan(response.data);
                });
    }, []);
    return (
        <>
            <div className="cabinet__history-title">
                <h1>
                    История операций
                </h1>
            </div>
            <TabBar>
                <TabBarItem label="Операции по займам">
                    <div className="loans-history">
                        {
                            operationsLoan.map((loan, index) => {
                                return <Loan loan={loan} key={index}/>;
                            })
                        }
                    </div>
                </TabBarItem>
            </TabBar>

Answer 1

[Роман]

export default function App() {
    const [operationsLoan, setOperationsLoan] = useState([] );
    const [loading, setLoading] = useState(false);

    useEffect(() => {
         setLoading(true);
            apiGetOperationsLoan()
                .then((response) => {
                    setOperationsLoan(response.data);
                    setLoading(false);
                });
    }, []);

// можно еще так сделать, зависит от обстоятельств
//   if (loading) {
 //    return <p> Идет загрузка данных </p>
 //  } 

    return (
        <>
            <div className="cabinet__history-title">
                <h1>
                    История операций
                </h1>
            </div>
            <TabBar>
                <TabBarItem label="Операции по займам">
                    <div className="loans-history">
                        {loading ? <p>Идет загрузка данных</p>
                                :   { operationsLoan.map((loan, index) => {
                                return <Loan loan={loan} key={index}/>;
                            })}
                          }
         
                    </div>
                </TabBarItem>
            </TabBar>

Comments

[lookingfor2]

Подскажите пожалуйста, а если у меня много запросов одновременно? И у каждого должна быть тестовая информация "Идет загрузка"

useEffect(() => {
            apiGetOperationsLoan()
                .then((response) => {
                    setOperationsLoan(response.data);
                });
            apiGetOperationsFinance()
                .then((response) => {
                    setOperationsFinance(response.data);
                });
            apiGetOperationsServices()
                .then((response) => {
                    setOperationsServices(response.data);
                });
            apiGetOperationsSystem()
                .then((response) => {
                    setOperationsSystem(response.data);
                });
    }, []);

 <TabBar>
                <TabBarItem label="Операции">
                    <div className="loans-history">
                        {
                            operationsLoan.map((loan, index) => {
                                return <Loan loan={loan} key={index}/>;
                            })
                        }
                    </div>
                </TabBarItem>
                <TabBarItem label="Финансовые">
                    <div className="finance-history">
                        {
                            operationsFinance.map((finance, index) => {
                                return <Finance finance={finance} key={index}/>;
                            })
                        }
                    </div>
                </TabBarItem>
                <TabBarItem label="Системные сообщения">

                </TabBarItem>
                <TabBarItem label=" рейтинг">
                    <div className="finance-history">
                        {
                            operationsServices.map((finance, index) => {
                                return <Finance finance={finance} key={index}/>;
                            })
                        }
                    </div>
                </TabBarItem>
            </TabBar>

[Роман]

lookingfor2, самый простой способ это решить для каждого запроса создать своё состояние лоадинга:

const [loadingOperations, setLoadingOperations] = useState(false);
const [loadingLoan, setLoadingLoan] = useState(false);
const [loadingFinance, setLoadingFinance] = useState(false);
const [loadingServices, setLoadingServices] = useState(false);
const [loadingSystem, setLoadingSystem] = useState(false);

useEffect(() => {
         setLoadingLoan(true);
         setLoadingOperations(true);
         setLoadingServices(true);
         setLoadingSystem(true);
         setLoadingFinance(true);

            apiGetOperationsLoan()
                .then((response) => {
                  setLoadingLoan(false);
                    setOperationsLoan(response.data);
                });
            apiGetOperationsFinance()
                .then((response) => {
                  setLoadingFinance(false);
                    setOperationsFinance(response.data);
                });
            apiGetOperationsServices()
                .then((response) => {
                     setLoadingServices(false);
                    setOperationsServices(response.data);
                });
         /// ну и так дальше..
    }, []);

и в рендере проверять

<TabBar>
                <TabBarItem label="Операции">
                    <div className="loans-history">
                       { loadingLoan ? <p>Loading...</p>
                         :
                          {operationsLoan.map((loan, index) => {
                                return <Loan loan={loan} key={index}/>;
                            })
                        }}
                    </div>
                </TabBarItem>
                <TabBarItem label="Финансовые">
                    <div className="finance-history">
                        {loadingOperations ? <p>Loading..</p> 
                          : 
                            operationsFinance.map((finance, index) => {
                                return <Finance finance={finance} key={index}/>;
                            })
                        }

Ну так дальше ..
Ну ещё лучше было бы создать хук который бы это всё сам делал)

[Роман]

lookingfor2, да у каждого, но можно сделать кастомный хук конечно, что-то на подобии этого:
https://usehooks.com/useAsync/

[lookingfor2]

Роман, а это не одно и тоже, что и ваше первое предложение, просто создать еще состояние лоадинга ?

[Роман]

lookingfor2, можно и просто создать свое состояние для всех лоадингов а можно просто создать свой хук например useAsyncData в который в аргумент будете передавать url адрес с которого запросить инфу либо функцию для получения передать туда и использовать в компоненте на подобии этого:

const finance = useAsyncData(apiGetOperationsFinance);
const loan= useAsyncData(apiGetOperationsLoan);
const services = useAsyncData(apiGetOperationsServices);
Ну и finance, loan, services, будет обьект который будет в себе содержать loading, data..

[lookingfor2]

Роман, спасибо Вам огромное, выглядит сложно, попробую сейчас )

[Роман]

lookingfor2, https://codesandbox.io/s/gracious-volhard-wi738?fi... вот базовая имплементация хука

[lookingfor2]

Роман, еще раз огромное Вам спасибо!

[lookingfor2]

Роман, Привет, дико извиняюсь, а можно сделать, чтобы по клику мы обращались к Апи, и сохраняли весь результат в объект, на данный момент при загрузке страницы у нас все сохраняется в объект

[Роман]

lookingfor2, если вы иммете ввиду вынести в хук ? - да можно, этот хук и делает то что вам нужно https://usehooks.com/useAsync/
Либо если вам нужно обработать при клике все запросы и получить все данные в 1 результате, нагуглите Promise.All()