时间戳

首页 > 解决方案 > 离子反应组件仅在单击按钮时显示

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

问题描述

我是 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>

);

标签： reactjstypescriptionic-framework

解决方案

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

    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() 方法之外/之后被调用。它没有时间向前传递数据。

推荐阅读