Question

我是Ionic和React的新手，想构建一个移动应用程序。该应用程序的UI结构不是新的，我有一个主屏幕，其作用类似于提要，并显示了从Firebase提取的数据。问题在于，在打开页面时，不会呈现负责显示数据<Requests/>的组件。为此，我必须单击一个按钮-<IonFabButton>中的第一个<IonFabList>以显示模式-这对我来说没有任何意义。谢谢。

return (
<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Requêtes de Livraison</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
  <Requests requests={deliveryRequests} />
    <IonModal isOpen={showModal}>
      <h2>Créer une nouvelle requête de livraison</h2>
      <IonInput value={newDeliveryRequestTitle} placeholder="Entrer un titre..." onIonChange={e => setNewDeliveryRequestTitle(e.detail.value!)}></IonInput>
      <IonInput value={newDeliveryRequestDescription} placeholder="Entrer une description..." onIonChange={e => setNewDeliveryRequestDescription(e.detail.value!)}></IonInput>
      <IonButton onClick={() => { setShowModal(false); }}>Fermer</IonButton>
      <IonButton onClick={() => {
        createNewDeliveryRequest({
          title: newDeliveryRequestTitle,
          description: newDeliveryRequestDescription,
          followers: 0
        }); setShowModal(false);
      }}>Créer</IonButton>
    </IonModal>
    <IonFab vertical="bottom" horizontal="end" slot="fixed">
      <IonFabButton><IonIcon icon={chevronUpCircleOutline} /></IonFabButton>
      <IonFabList side="top">
        <IonFabButton onClick={() => setShowModal(true)}><IonIcon icon={addCircleOutline} /></IonFabButton>
        <IonFabButton><IonIcon icon={navigateCircleOutline} /></IonFabButton>
      </IonFabList>
    </IonFab>
  </IonContent>
</IonPage>

）;

Answer 1

好吧，解决我的问题的方法很简单，原因是函数中的一个愚蠢的错误：

    const fetchDeliveryRequests = () =>{
    let requests = Array<DeliveryRequest>();
    db.collection('delivery-requests').get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        let deliveryRequest: DeliveryRequest = {
          title: doc.data().title,
          description: doc.data().description,
          followers: doc.data().followers,
        };
        requests.push(deliveryRequest);
      });

    });
    setDeliveryRequests(requests); //It should not be here
  }

我将其更改为：

const fetchDeliveryRequests = () =>{
let requests = Array<DeliveryRequest>();
db.collection('delivery-requests').get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    let deliveryRequest: DeliveryRequest = {
      title: doc.data().title,
      description: doc.data().description,
      followers: doc.data().followers,
    };
    requests.push(deliveryRequest);
  });
     setDeliveryRequests(requests); //New place
});

}

说明： setDeliveryRequests（）在get（）方法之后/之后被调用。没有时间将数据转发。

仅在单击按钮时显示离子反应组件

1 个答案: