Реагировать на собственный обратный вызов после ответа SocketIO

Question

У меня есть приложение React Native, которое на 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 будет вызываться перед рендерингом, но, поскольку он загружает данные асинхронно и так как реагирование не будет ждать разрешения обещания, страница будет отображаться без данных и будет повторно отображаться позже, когда данные будут доступны.

как решить

для правильного ответа требуется больше контекста, но у вас есть по крайней мере следующие варианты:

1. Используйте ту же логику, но добавьте счетчик загрузки / индикатор выполнения для этого представления.
2. Переключиться на представление при загрузке данных, но пользователи будут воспринимать его вяло.
3. Если возможно, предварительно загружать и кэшировать данные, пока они находятся в предыдущем окне.