Ioni c Реагирует, что мой компонент не рендерит при первом просмотре с помощью map () - PullRequest
Новая
       37

Ioni c Реагирует, что мой компонент не рендерит при первом просмотре с помощью map ()

1 голос
/ 02 мая 2020

Хорошо, я делаю приложение с Ioni c и React. У меня проблема при попытке отобразить список компонентов с помощью функции карты. Проблема в том, что при первом посещении страницы ничего из моего <Request> компонента не отображается. Но если вы взаимодействуете со страницей / приложением, например, нажмите кнопку сегмента или щелкните вкладку, чтобы снова войти на страницу, информация отобразится. Вот мой код ниже: 

  const Help: React.FC = () => {

    const [info, setInfo] = useState([]);


    useEffect(() => {
        setInfo(getYourRequest())

    }, []);


    return (
        <IonContent>
            <IonGrid>
                <IonToolbar>
                    <IonRow>
                        <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
                            <IonSegmentButton  value="activehelps" >
                                <IonLabel>Active helps</IonLabel>
                            </IonSegmentButton>
                            <IonSegmentButton  value="inactivehelps" >
                                <IonLabel>Inactive helps</IonLabel>
                            </IonSegmentButton>
                        </IonSegment>
                    </IonRow>
                    <IonRow>
                        <p>{mode}</p>
                    </IonRow>
                </IonToolbar>
                <IonList>

                    {info.map((item: any, index: number) => (
                        <Request key={index} item={item}/>
                    ))}

                </IonList>
            </IonGrid>
        </IonContent>
    );
}

Я получаю данные из базы данных из этой функции: 

  export function getYourRequest() {

  let userRef: any = firebase.auth().currentUser;
  let reqArr: any = []
  let requestRef = db.collection("something").where("something", "==", "something")
  requestRef.get().then(snapshot => {
    snapshot.forEach(req => {

      reqArr.push({ "an object" })
    });

  })
      .catch(err => {
        console.log('Error getting documents', err);
      });

  return reqArr
}

Я успешно использовал подобные методы на других страницах, но здесь, когда я использовать функцию map() Я получаю эту небольшую ошибку. Я попытался сделать getYourRequest() asyn c и получить его в useEffect с помощью .then(). Или просто удалите компонент <Request> и поместите весь код в один файл, но я получаю ту же проблему. Любая помощь будет оценена!

...