Блог

Я работаю над приложением, в котором люди могут выбирать хранилища и сохранять их в своем профиле. Я использую аутентификацию Google firebase для обработки пользователей, которые входят в систему. когда пользователь посещает экран профиля, он загружает данные из firebase. показать имя и выбранные хранилища.

У меня есть плоский список всех магазинов, который загружается локально (жестко запрограммирован), это список магазинов, которые люди выбирают и отменяют выбор. если выбрано, фон этого элемента изменится на другой цвет, указывающий на то, что он был выбран. при загрузке из firebase, если выбран какой-либо из этого хранилища, ему придется изменить фон.

   const selectStore = (index) => {
    const data = [...stores];
    data[index].selected = !data[index].selected;
    store(data);
  };
 

когда они посетят экран во второй раз, он загрузит данные из firebase и отобразит их пользователям. Проблема в том, что экран загружается намного быстрее, прежде чем он сможет отобразить все данные из firebase, он отобразит имя и все остальное, но когда он попадет в выбранные хранилища, он загрузит страницу быстрее, чем будет отображать данные, таким образом, показывая только список хранилищ, даже если вы выбралинекоторые, если я обновлю экран, на этот раз он покажет выбранные в данный момент хранилища. Я хочу убедиться, что перед загрузкой установлено значение true, у него есть некоторое время для правильной загрузки всех данных.

Я использую следующее, чтобы получить информацию о текущем пользователе, вошедшем в систему:

 useEffect(() => {
    setLoading(true);
    var user = firebase.auth().currentUser;
    if (user) {
      fetchUser(user.uid);
    } else {
      // No user is signed in.
      alert("if you see this message something has gone wrong!");
    }
  }, []);
 

затем у меня есть коллекция, созданная в firebase для сохранения некоторых пользовательских данных, включая выбранные хранилища, которые представляют собой массив:

   const fetchUser = async (userId) => {
    const userRef = db.collection("users").doc(userId);
    const doc = await userRef.get();
    if (!doc.exists) {
      console.log("No such user!");
    } else {
      if (doc.data().fname.length === 0) {
        setUseFirstName("");
        setUseLastName("");
        setShopList([]);
      } else {
        setUseFirstName(doc.data().fname);
        setUseLastName(doc.data().lname);
        setShopList(doc.data().supermarks);
        for (let i = 0; i < shopList.length; i  ) {
          let index = shopList[i].id;
          selectStore(index - 1);
        }
      }
      setLoading(false);
    }
  };
 

когда я захочу отобразить информацию, он покажет индикатор загрузки, если загрузка верна, затем он просто опубликует имя и фамилию, которые он не выбирает в хранилище. Как я могу это сделать? достаточно ли ясен мой вопрос?

Я не на 100% понимаю, о чем вы спрашиваете, но использовать флаг загрузки для отображения индикатора загрузки выглядит примерно так:

   if(loading) {
    return (
      <View>
        <ActivityIndicator animating={true}/>
        <Text>Loading your data...</Text>
      </View>
    )
  } else {
    return (
      [Rest of your code here]
    )
  }
 

Вы должны использовать ActivityIndicator для отображения значка загрузки, пока не получите данные из firebase.

https://reactnative.dev/docs/activityindicator