React native fetch state not updating?

Question

    const [restaurantsData,setrestaurantsData]=useState([])
  useEffect(()=>{
    const getData = async () => {
    await fetch('http://localhost:5000/api/v1/res/')
      .then((response) => response.json())
      .then((json) => {setrestaurantsData(json.data),console.log(restaurantsData)})
      .catch((error) => console.error(error))
      .finally();
  };
getData();
console.log(id)
console.log("photo",restaurantsData.photo)
  },[])

 useEffect(()=>
 {
  for (const {type: t} of menuDetailedData) 
 { 
   routes.push({key:i,title:t})
   i++;
 }
 console.log("routes",routes)
let acc=[]
 for(let i=0; i<menuDetailedData.length-1;i++)
 {
  if(routes[i].title===routes[i+1].title)
  {
    acc.push(routes[i])
  }
}
setroutes(routes.filter(item => !acc.includes(item)))
console.log("acc",acc)

 },[]) 
 

The restaurant data in this code is always null. However I have same code in previous screen working perfectly fine. I dont know why the state is not updating the. May be useeffect is causing problem

Answer 1

To see the changes of restaurantsData you must use an useEffect to verify that change:

Like this:

useEffect(()=> {
   console.log(restaurantsData)
   // if the restaurantsDate is still null here probably your service its not working correctly 
   //NOTE: as I am passing the restaurantsData in the dependency array of the useEffect every time that restaurantsData change this will execute.
}, [restaurantsData])