刷新页面后调用数据（React Native Hooks）

Question

这是我的代码

const [getData, setGetData] = useState();
const [ref, setRef] = useState();

const initializeData = async() => {
  const userToken = await AsyncStorage.getItem('user_id');
  setGetData(JSON.parse(userToken));
}

useEffect(() => {
  return initializeData();
},[])

useEffect(() => {
  let interval;
  if(getData != null)
  {
    interval = setInterval(() => {
      setRef(firestore().collection('**********').where("SendersNo", "==", getData.number));
    }, 2000);
  }
  return () => clearInterval(interval);
},[getData])

useEffect(() => {

  if(ref != null)
  {
    return ref.onSnapshot(querySnapshot => {
      const list = [];
      querySnapshot.forEach(doc => {
          const {
              id,driverName,driverContactNumber,driverRating,driverPlateNumber,driverTrackingNumber,userPlaceName,
              destinationPlaceName,PaymentMethod,Fare
          } = doc.data();
          list.push({id: doc.id,driverName,driverContactNumber,driverRating,
            driverPlateNumber,driverTrackingNumber,userPlaceName,destinationPlaceName,PaymentMethod,Fare});
      });
      setUserBookingData(list);
      console.log("HEY!");
    });
  }
  
},[])

const CurrentTransaction = () => {
  if(ref == null)
  {
    return (
      <View>
        <Text>You don't have a Current Transaction</Text>
      </View>
    )
  }
  else
  {
    return userBookingData.map((element) => {
      return (
        <View key={element.id}>
             <View>
                 <Text>{element.name}</Text>
             </View>
        </View>
         )
        });
     }
}

所以目前我正在尝试的是，如果我的 Firestore 上有数据，它将在屏幕上更新，但在更新之前，我需要从 setGetData 获取数据，以便我可以查询它，但问题是是当我刷新整个模拟器/页面时，它没有获取数据，而只是一个空白页面。但是当我编辑并保存我的代码而不刷新页面/模拟器时，它可以获得数据。有人可以帮我做错什么。

编辑

如果我这样做

useEffect(() => {
  if(ref != null)
  {
    return ref.onSnapshot(querySnapshot => {
      const list = [];
      querySnapshot.forEach(doc => {
          const {
              id,driverName,driverContactNumber,driverRating,driverPlateNumber,driverTrackingNumber,userPlaceName,
              destinationPlaceName,PaymentMethod,Fare
          } = doc.data();
          list.push({id: doc.id,driverName,driverContactNumber,driverRating,
            driverPlateNumber,driverTrackingNumber,userPlaceName,destinationPlaceName,PaymentMethod,Fare});
      });
      setUserBookingData(list);
      console.log("HEY!");
    });
  }
  else
  {
    return null;
  }
},[ref])

它不断循环console.log('hey')，但它可以获取数据并显示它。但它会循环，所以很糟糕。

Answer 1

我相信来自 firebase 实时数据库的快照是一个监听器，所以它不需要 setinterval

useEffect(() => {
  if(getData != null)
  {
    const ref = firestore().collection('**********').where("SendersNo", "==", getData.number);
    ref.onSnapshot(querySnapshot => {
      const list = [];
      querySnapshot.forEach(doc => {
          const {
              id,driverName,driverContactNumber,driverRating,driverPlateNumber,driverTrackingNumber,userPlaceName,
              destinationPlaceName,PaymentMethod,Fare
          } = doc.data();
          list.push({id: doc.id,driverName,driverContactNumber,driverRating,
            driverPlateNumber,driverTrackingNumber,userPlaceName,destinationPlaceName,PaymentMethod,Fare});
      });
      setUserBookingData(list);
      console.log("HEY!");
    });

  }
  return () => {
   //clear your ref listener here
  }
},[getData])

如果你放了一个return on use效果，它会在屏幕不再使用后被调用。

useEffect(()=>{
  //inside this will be called when the screen complete render
  const someListener = DeviceEventEmitter('listentosomething',()=>{
  //do something
  });
return ()=>{
 //inside this will be called after the screen no longer be used 
 //example go to other screen
someListener.remove();
}
},)