从服务器获取数据时，react页面不会呈现

Question

react在渲染页面时不起作用，但当我更改vscode中的代码(添加一行控制台或注释一行(时，页面就会被渲染。或者当页面未被呈现时。当我点击刷新时。我可以看到我的一些内容，但无法呈现。usestate似乎无法成功保存值

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])
}

Answer 1

我认为问题在于您在get请求中使用状态作为参数。由于状态设置器函数不返回promise，所以在它们上使用wait基本上没有用。您应该直接使用从get请求中获得的变量。例如，使用id而不是parkId，依此类推