Question 119411 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – TypeError: prevDeps.join is not a function next js

I want to create a search bar in next js and firebase and it works by getting the slug from the url and parse it though my search algorithm. The problem is that if the user uses the search bar 2 times it breaks and shows this error:

enter image description here

this is how I push the data

              <Link  href={`http://localhost:3000/search/${search}/`} >
                <Magnify fontSize='small' />
              </Link>

and here is how ii get it

   const serachId = router.query.id;
    useEffect(() => {
        onAuthStateChanged(auth, async (user) => {

            if (user) {
                // User is signed in, see docs for a list of available properties
                // https://firebase.google.com/docs/reference/js/firebase.User
                const places = query(collection(getFirestore(app), '/programs'))
                const querySnapshot = await getDocs(places)



                querySnapshot.docs.forEach(doc => {

                    if (JSON.stringify(doc.data()).includes(router.query.id)) {
                        let programObj = {
                            age: doc.data().price,
                            icon: doc.data().logo,
                            status: "software",
                            date: doc.data().start,
                            name: doc.data().name,
                            salary: '$$$',
                            email: doc.data().website,
                            designation: 'Human Resources Assistant',
                            id: doc.id
                        };
                        setPrograms(prev => [...prev, programObj]);
                    }
                })
            }
            else {
                console.log("no loggin")
            }
        });

    }, router.query.id)
Tags:

2

Answers


  1. 0

    Your dependency array should be in square brackets [ ]

    like this: [router.query.id]

    Login or Signup to reply.
  2. 0

    The problem is in useEffect take 2 param, useEffect(callback () => {}, array);

    The error is generated because in useEffect try d’use .join but is not a array.

    Exemple code : valid :

    if data is update, call callback.

    useEffect(() => {
  alert(data);
}, [data]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search