Как использовать функцию карты перед извлечением информации React js - PullRequest
Новая
       83

Как использовать функцию карты перед извлечением информации React js

0 голосов
/ 03 мая 2020

Я делаю домашнюю страницу с этой структурой 

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

  [ ... ]

  return (
    <IonPage>


      <IonContent>

          <IonSlides pager={false} options={slideOpts}>
            {
              responseProducts.content.products.map(function(item,i) {
                return <IonSlide key={i} >
                        <IonCard onClick={Product}>
                          <IonImg src={item.urlImg}></IonImg>
                          <IonCardHeader>
                            <IonCardSubtitle>{item.ref}</IonCardSubtitle>
                            <IonCardTitle>{item.title}</IonCardTitle>
                          </IonCardHeader>
                        </IonCard>
                      </IonSlide>
              })
            }
          </IonSlides>

      </IonContent>
    </IonPage>
  );
};

Переменная responseProducts.content.products представляет собой массив продуктов, когда я получаю серверный API.

Я пытаюсь получить api для инициализации переменной перед запуском приложения: 

const Login: React.FC = () => {
  /* this is the initialization of my variable with products*/
  let responseProducts : getProductsReponse;
  /* function to fetch the api*/
  useIonViewDidEnter(async () => {
    await fetchProducts();
  });


  const fetchProducts = async() =>{
    await ProductService.getProducts()
      .then((products ) =>{
         responseProducts = products.data;
      })
  }

  return (
    <IonPage>

      <IonContent>

          <IonSlides pager={false} options={slideOpts}>
            {
              responseProducts.content.products.map(function(item,i) {
                return <IonSlide key={i} >
                        <IonCard onClick={Product}>
                          <IonImg src={item.urlImg}></IonImg>
                          <IonCardHeader>
                            <IonCardSubtitle>{item.ref}</IonCardSubtitle>
                            <IonCardTitle>{item.title}</IonCardTitle>
                          </IonCardHeader>
                        </IonCard>
                      </IonSlide>
              })
            }
          </IonSlides>

      </IonContent>
    </IonPage>
  );
};

Но я получаю эту ошибку с моей переменной с продуктами: 

Variable 'responseProducts' is used before being assigned

1 Ответ

2 голосов
/ 03 мая 2020

[Изменить]: Чтобы отобразить другой контент во время ожидания ваших данных, вы можете сделать что-то вроде этого: 

if (!responseProducts) return <Loader />;
  else
    return (
      <IonPage>
        ...
      </IonPage>
    );

Но здесь вам нужно запустить рендеринг вашего компонента. Либо приведите ваши продукты в состояние и используйте setState, либо обработайте выборку в родительском элементе и передайте ваши продукты как propr (все еще требуется состояние).

Вам необходимо значение по умолчанию для вашего responseProducts , Для этого можно использовать хук useEffect и хук useState: 

const Login: React.FC = () => {
  const [products, setProducts] = useState({});
  const [didMount, setDidMount] = useState(false);

  useEffect(() => {
    if(!didMount){
      // I don't know where this comes from so i'll use it like this, adapt if needed
      useIonViewDidEnter(async () => {
        await fetchProducts();
      });
    } else {
      !didMount && setDidMount(true);
    }
  });

  /* this is the initialization of my variable with products*/
  let responseProducts: getProductsReponse;
  /* function to fetch the api*/


  const fetchProducts = async () => {
    await ProductService.getProducts().then((products) => {
      // responseProducts = products.data;
      const data: getProductsReponse = products.data;
      setProducts(data);
    });
  };

  // You could even put a different return (a loader for exemple) while your data arent available
  return (
    <IonPage>
      <IonContent>
        <IonSlides pager={false} options={slideOpts}>
          {/* this is now strange, you can adapt what you put in your state */}
          {products.content.products.map((item, i) => {
            return (
              <IonSlide key={i}>
                <IonCard onClick={Product}>
                  <IonImg src={item.urlImg}></IonImg>
                  <IonCardHeader>
                    <IonCardSubtitle>{item.ref}</IonCardSubtitle>
                    <IonCardTitle>{item.title}</IonCardTitle>
                  </IonCardHeader>
                </IonCard>
              </IonSlide>
            );
          })}
        </IonSlides>
      </IonContent>
    </IonPage>
  );
};
...