useState array becomes 2 arrays in console.log?-CodePudding

Im trying to just use a empty array in a react/ts project like this. const [companyChatrooms, setCompanyChatrooms]: any = useState([]);

I then use a useEffect to get it done when rendering component.

    async function fetchMyChatRooms() {
    const userCollection = await firestore.collection('user_in_chat')
    const snapshot = await userCollection.where('user_id', '==', myIdNumber).where('chatroom_id', '==', companyChatrooms).get();
    snapshot.forEach(doc => {
    const roomID = doc.data().chatroom_id
    setMyChatrooms([...myChatrooms, roomID])
    });
    }
    fetchMyChatRooms()
    }, [companyChatrooms, myIdNumber])
    console.log(myChatrooms)```

However, my console.log shows 2 arrays with each value instead of 1 array holding both values.

How can i make sure both values are stored in same array?


  [1]: https://i.stack.imgur.com/q0WPD.png  <-- Check how the output looks.

CodePudding user response：

I assume you have an array snapshot with more than 1 element and any iteration you are updating the state. This caused multiple re-render

I suggest you to update state after iterate entire array. Example:

const rooms = []
snapshot.forEach(doc => {
    const roomID = doc.data().chatroom_id;
    rooms.push(roomID);
});
setMyChatrooms(rooms)

CodePudding user response：

you should set all of them in one time.

   async function fetchMyChatRooms() {
    const userCollection = await firestore.collection('user_in_chat')
    const snapshot = await userCollection.where('user_id', '==', myIdNumber).where('chatroom_id', '==', companyChatrooms).get();
   
// here is the changing
const roomIDs = snapshot.map(doc => doc.data().chatroom_id);
setMyChatrooms(roomIDs )
//
  fetchMyChatRooms()
    }, [companyChatrooms, myIdNumber])
    console.log(myChatrooms)