Заполните пользовательский интерфейс после завершения загрузки данных

Question

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

function MyScreen() {
    model.refreshData();
    const data = model.getData();
    return (<View><Text>{data}</Text></View>);
}

Это не работает, потому что, опять же, данные не обновлялись к тому времени, когда мы выполняем «getData». Я не могу использовать .then, потому что тогда я не смогу вернуть часть (<View><Text>{data}</Text></View>). Есть ли способ заставить экран обновляться после завершения model.refreshData()?

Answer 1

Используйте реактивное состояние, чтобы изменить возвращаемое значение MyScreen, когда данные будут загружены. Ниже приведен псевдокод:

function MyScreen() {
    const [screenData, setScreenData] = useState(null);
    model.refreshData();
    setScreenData(model.getData());

    // Component will render nothing until data is finished loading
    if (!screenData) {
      return null;
    }

    // Once data is loaded your full component will render
    return (<View><Text>{screenData}</Text></View>);
}

Если getData() является обещанием, то вместо

setScreenData(model.getData());

do

model.getData().then((data) => setScreenData(data));