一旦数据加载完成，填充用户界面

Question

我正在从服务器获取数据，并且我希望每次用户进入屏幕时都执行此操作。问题是，我在调用screen函数时开始获取数据，显然在填充屏幕之前没有足够的时间来获取数据。我现在正在尝试的是类似的东西：

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());

做

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