Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

102
Visualizações
Trying to render document in react-native app

I am getting my document data back and storing it in state, but when I try to render it, I am only getting the first item. I notice when I refresh the app, I can see the other items briefly. Not sure why my mapping isn't rendering all the data.

const [tickets, setTickets] = useState([]);

useEffect(() => {
    GetTickets();
  }, []);

  console.log(tickets);


  const db = getFirestore();

  const colRef = collection(db, "Tickets");

  function GetTickets() {
    getDocs(colRef).then((snapshot) => {
      let tickets = [];
      snapshot.docs.forEach((doc) => {
        tickets.push({ ...doc.data(), id: doc.id });
        setTickets(tickets);
      });
    });
  }

  return (
    <View style={GlobalStyles.container}>
      <Text>Previous tickets</Text>
      {tickets.map((ticket) => (
        <Text key={ticket.id}>{ticket.form.TicketNumber}</Text>
      ))}
    </View>
  );
about 4 years ago · Santiago Gelvez
3 Respostas
Responde à pergunta

0

In React Native, you can use map or flatList for rendering an array. If you are trying to display a large amount of data it is better to use flatList(better performance with large amount of data).

Replace this code

  {tickets.map((ticket) => (
    <Text key={ticket.id}>{ticket.form.TicketNumber}</Text>
  ))}

with this code

<FlatList
data={tickets}
renderItem={({item}) => <Text>{item.form.TicketNumber}</Text>}
/>
about 4 years ago · Santiago Gelvez Relatório

0

Try this may be your state is getting set before your data is pushed in array put it outside loop like this

const [tickets, setTickets] = useState([]);

useEffect(() => {
    GetTickets();
  }, []);

  console.log(tickets);


  const db = getFirestore();

  const colRef = collection(db, "Tickets");

  function GetTickets() {
    getDocs(colRef).then((snapshot) => {
      let tickets = [];
      snapshot.docs.forEach((doc) => {
        tickets.push({ ...doc.data(), id: doc.id });
      });
      setTickets(tickets);
    });
  }

  return (
    <View style={GlobalStyles.container}>
      <Text>Previous tickets</Text>
      {tickets.map((ticket) => (
        <Text key={ticket.id}>{ticket.form.TicketNumber}</Text>
      ))}
    </View>
  );
about 4 years ago · Santiago Gelvez Relatório

0

I'm not sure if it will help you but 2 comments for help you in your search:

  • You are calling setTickets inside the loop, smells like a problem, because of the async flow.
  • Also, why are you defining the variable name in the scope of the function, with the same name of the variable for state of the tickets, smells not so good.

Hope it can help you.

about 4 years ago · Santiago Gelvez Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda