React页面获取服务端数据后无法渲染的问题求助

核心问题点 #

1. 不必要的parkId状态+依赖错误
   • 从useParams()拿到的id可直接使用，没必要额外存为parkId状态。原代码把parkId作为useEffect依赖，加上错误用await setParkId(id)，导致请求时parkId还是初始空值，接口地址错误拿不到数据。
   • setParkId执行后会触发useEffect重复执行，可能造成请求循环。
2. 错误使用await等待setState
   • useState的更新函数是异步操作，但不返回Promise，所有await setParkId()、await setpark()这类写法完全无效，还会造成逻辑误解。
3. 状态更新后立刻打印的误区
   • 调用setpark(park1)后立刻console.log(park)，此时park还没完成更新（setState是异步批量更新），打印的是旧值，会误以为状态没保存成功。

为什么热重载后能正常渲染？ #

热重载时，id已经从路由参数中拿到，此时组件重新执行会直接用id发起请求，跳过了初始空值请求的阶段，所以能拿到数据正常渲染。

修复后的代码 #

const ParkDetail = () => {
  const [park, setPark] = useState(null) // 初始值设为null，区分未加载状态
  const [areas, setAreas] = useState([])
  const [ridesName, setRidesName] = useState([])
  const [rides, setRides] = useState([])

  const { id } = useParams()

  useEffect(() => {
    // 先判断id是否存在，避免无效请求
    if (!id) return

    async function getPark() {
      try {
        // 直接用路由参数id请求，不需要额外状态
        const res = await axios.get(`/parks/details/${id}`)
        const parkData = res.data.park
        
        setPark(parkData)
        setAreas(parkData.serviceAnimalRelief || []) // 加默认值避免undefined
        // setRidesName(parkData.topRides || [])
      } catch (e) {
        console.error('获取公园详情失败:', e.message)
      }
    }

    getPark()
  }, [id]) // 依赖改为路由参数id，id变化时重新请求

  // 增加加载状态判断，避免页面空渲染
  if (!park) {
    return <div>加载中...</div>
  }

  // 后续渲染代码
  return (
    <div>
      {/* 渲染park、areas等数据 */}
    </div>
  )
}

额外优化建议 #

• 状态命名统一规范：比如setpark改为setPark，setridesName改为setRidesName，符合驼峰命名
• 请求失败时可增加用户可见的错误提示，而非仅打印日志
• 对接口返回的可选字段增加默认值，避免渲染时出现undefined报错

内容的提问来源于stack exchange，提问作者gongonlittle