I created an empty state array than push data in it from firebase.
const [chats, setChats] = useState([]);
When I use console.log(chats)
function, it returns me the array correctly
useEffect(() => {
async function GetChats() {
const data = chats;
const querySnapshot = await getDocs(collection(db, "chat"));
querySnapshot.forEach((doc) => {
data.push({
id: doc.id,
data: doc.data(),
});
setChats(data);
});
}
GetChats();
}, []);
console.log(chats)
Console:
-
[{…}]
-
0
:
-
data
: {cinsiyet: 'erkek', memleket: 'rize', name: 'kutay akgün'}
-
id
: "Kutay"
-
[[Prototype]]: Object
-
-
1
:
-
data
: {memleket: 'Rize', name: 'Ali Aydın', cinsiyet: 'Erkek'}
-
id
: "Ali"
-
[[Prototype]]: Object
-
-
2
:
-
data
: {cinsiyet: 'Kadın', name: 'Fatma Aydın', memleket: 'Rize'}
-
id
: "Fatma"
-
[[Prototype]]: Object
-
-
3
:
-
data
: {cinsiyet: 'Erkek', memleket: 'Rize', name: 'Kutay Aydın'}
-
id
: "Kutay"
-
[[Prototype]]: Object
-
-
length
: 4
-
[[Prototype]]: Array(0)
-
NO PROBLEM UP TO THIS POINT
But than when I try to render array to a component with map function it returns noting. I use return
too but it doesn’t work.
return (
<SafeAreaView>
<ScrollView>
{
chats.map((chat) => {
return (
<Text key={chat.id}>{chat.data.name}</Text>
);
})
}
</ScrollView>
</SafeAreaView>
);
chats array type was never[]. To fix it I add one data manually to define type of the array
const [chats, setChats] = useState([{id: "Kutay",data:{cinsiyet: "erkek", memleket: "rize", name: "kutay akgün"}}]);
now this is how it is:
const chats: {
id: string;
data: {
cinsiyet: string;
memleket: string;
name: string;
};
}[]
which is true at all.
But now when I try to render array. It only renders the first element which I added manually.
How can I make possible to render other elements too.??
2
Answers
@Hao Wu's comment solved the problem.
You shouldn’t be using async in useEffect, that’s why React "yells" at you when you try to do it.