在SocketIO响应后React Native回调

Question

我有一个React Native App，它在componentWillMount()上调用一个函数来保存该列表中的所有内容。

var list = []
const getMatchList = (logKey) => {
  global.socket.emit("getMatches", logKey, (data) => {
    //adding to list logic
  })
  console.log("Matches Loaded");
}
class MatchesScreen extends React.Component {
  async componentWillMount() {
    logKey = await getPreferences("logKey");
    await getMatchList(logKey)
  }
  componentDidMount() {
    console.log(list);
  }
}

当我访问该屏幕时，它首先显示空列表，然后我收到消息“Matches Loaded”。我怎么能先加载火柴？

谢谢。

Answer 1

whats wrong

我看起来你期望await将你的异步函数变为同步函数，但事实并非如此。您的componentWillMount将在呈现之前被调用，但由于它以异步方式加载数据，并且由于react不会等待承诺解析，因此页面将呈现没有数据，并且只要数据可用就会在以后重新呈现。

how to solve

这需要更多的上下文来获得一个好的答案，但你至少有以下选择：

1. 使用相同的逻辑，但为该视图添加加载微调器/进度条。
2. 加载数据时切换到视图 - 但用户会感觉迟钝。
3. 如果可能的话，在前一个视图中预加载和缓存数据。