SocketIO响应后响应本机回调

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

当我访问该屏幕时，它首先显示空白列表，然后显示消息“已加载匹配”。我如何首先加载比赛？

谢谢。

Answer 1

怎么了

我似乎希望await会将您的异步功能转换为同步功能，但事实并非如此。您的componentWillMount 将在呈现之前被调用，但是由于它异步加载数据，并且由于react将不会等待promise解析，因此该页面将不显示任何数据，并且只要有数据就将在以后重新呈现

解决方法

这需要更多的上下文才能有一个好的答案，但是您至少有以下选择：

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