Как дождаться ответа сервера и только тогда выполнить рендеринг компонента в React?

Question

У меня есть функция getItemListBySubscriber в которой мы получаем данные с сервера и записываем их в стейт.

Я так понимаю функция возвращает промис. Дальше мне нужно использовать уже измененный стейт а именно subscriber_item_list и пердать его значения дальше в качестве пропса в другой компонент(Table) в рендере.

Подскажите пожалуйста как это сделать? Код писал мой друг я прост делал "рефакторинг". Я только начал все изучать и до конца понятия ассинхронности не понимаю, а точнее не умею использовать. Буду очень благодарен.

Answer 1

Можно создать условие: если subscriber_item_list не пуст, можно рендерить нужное тебе содержимое, иначе можно возвращать, например, сообщение о загрузке. Вот примерный псевдокод с использованием хуков:

import React, { useState, useEffect } from "react";

const App: React.FC = () => {
    const [asyncData, setAsyncData] = useState<string>(null!);
    
    useEffect(() => {
        setTimeout(() => {
            setAsyncData("something");
        }, 2000);
    });

    return asyncData ? <div>Your content</div> : <div>Loading...</div>;
};

export default App;

Answer 2

Дальше мне нужно использовать уже измененный стейт а именно subscriber_item_list и пердать его значения дальше в качестве пропса в другой компонент(Table) в рендере.

Начните с чтения официальной документации, тем более она на русском языке :) https://ru.reactjs.org/docs/components-and-props.html

В целом: компоненты отрисовываются заново (rerender) тогда, когда меняется пропс или state.

В примере, который Вы указали выше - после получения данных от сервера как раз меняется state, соответственно когда state поменяется - то React отрисует Ваш компонент заново.

БЛОГ НА HUSL

Как дождаться ответа сервера и только тогда выполнить рендеринг компонента в React?

Ответы (2 шт):