2

react won't work when rendering the page, but when i changed code in the vscode (added a line of console or comment one line out), the page is rendered. or when page is not rendered. when i hit refresh. i can see some of my content but it won't render. the usestate doesnt seem like to successfully save the value

const ParkDetail = () => {
      const [parkId, setParkId] = useState('')
      const [park, setpark] = useState('')
      const [areas, setAreas] = useState([])
      const [ridesName, setridesName] = useState([])
      const [rides, setrides] = useState([])
    
      let { id } = useParams()
    
      console.log(id)
    
      useEffect(() => {
        async function getPark() {
          try {
            await setParkId(id)
            const res = await axios.get(`/parks/details/${parkId}`)
            console.log(res)
            const park1 = await res.data.park
            console.log(park1)
            await setpark(park1)
            console.log(park)
            await setAreas(park1.serviceAnimalRelief)
            // await setridesName(park1.topRides)
            // console.log(ridesName)
          } catch (e) {
            console.log(e.message)
          }
        }
    
        getPark()
      }, [parkId])

}
James Z
  • 12,209
  • 10
  • 24
  • 44
gongonlittle
  • 21
  • 1

1 Answers1

0

I believe the problem is you using the state as parameters in your get requests. Since state setter functions do not return promises, using await on them is basically of no use. You should rather use the variables that you obtain from the get requests directly. For example, use id instead of parkId and so on.

HittuDesai
  • 341
  • 2
  • 7