Access variable outside useEffect in React.js

Question

I am trying to fetch data as soon as page loads using useEffect(), but the problem is I don't know where to declare stateful const [orders, setOrders] = useState([]); when I put it above main function ( trying to make it global ) I get error saying React useState cannot be called top level. When I move it inside the function I cannot access it from fetchdata() function. I have to use setOrders from inside fetchdata() What is the proper way to do it ?

 function ActiveOrders () {
    
      const [orders, setOrders] = useState([]);
      
      useEffect(()=>{
        
        fetchPost();
       }, [])
    
    }
    
    const fetchPost = async () => {
       
        await getDocs(collection(db, "orders"))
            .then((querySnapshot)=>{               
                const newData = querySnapshot.docs
                    .map((doc) => ({...doc.data(), id:doc.id }));
                setOrders(newData);                
                console.log(orders, newData);
            })
       

}

Error I am getting : 'setOrders' is not defined

'orders' is not defined

Aurélien · Accepted Answer · 2023-01-04 15:07:22Z

1

The function fetchPost() should be in your component scope:

function ActiveOrders() {
  const [orders, setOrders] = useState([]);

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

  const fetchPost = async () => {
    await getDocs(collection(db, "orders")).then((querySnapshot) => {
      const newData = querySnapshot.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id,
      }));
      setOrders(newData);
      console.log(orders, newData);
    });
  };

// Then, return()...    

}

answered Jan 4, 2023 at 15:07

Aurélien

1,6552 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yoqubxon Xamidoff Over a year ago

Thanx! Fixed and working!

Aurélien Over a year ago

Good to read that! If your issue is closed, please mark it as answered.

netlorecomment · Accepted Answer · 2023-01-04 15:21:36Z

0

Move } after useEffect to end of the function for this problem. Next problem is that you are using "await" within "then" try write this code:

const {docs} = await getDocs(collection(db, "orders"))
  const newData = docs.map((doc) => ({
    ...doc.data(),
    id: doc.id,
  }));
  setOrders(newData);
  console.log(orders, newData)

edited Jan 4, 2023 at 15:21

answered Jan 4, 2023 at 15:18

netlorecomment

1862 silver badges6 bronze badges

Collectives™ on Stack Overflow

Access variable outside useEffect in React.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related