在SocketIO响应后React Native回调

问题描述 投票:0回答:1

我有一个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”。我怎么能先加载火柴?

谢谢。

javascript react-native async-await
1个回答
0
投票

whats wrong

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

how to solve

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

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