React页面数据返回与渲染存在时间差导致rowData未及时填充如何解决

问题根源 #

你当前的代码报错核心是组件首次渲染时，data为初始空数组，直接执行data[2].name会抛出未定义读取错误，组件还没等到接口返回就已经渲染失败，并不是Table渲染时的时序问题。

解决步骤 #

1. 给rowData增加取值校验+缓存 #

用useMemo把rowData和data绑定，只有data更新时才重新计算rowData，同时增加数组长度和可选值校验，避免初始化报错：

// 记得先从react引入useMemo
const rowData = useMemo(() => {
  // 校验data长度是否满足下标要求
  if (Array.isArray(data) && data.length >= 3) {
    return [
      {
        id: '123-456-AB2',
        // 加可选链+兜底值，进一步避免属性不存在报错
        accessorName1: data[2]?.name ?? '暂无数据',
        accessorName2: 'another value0',
        accessorName3: 'tim'
      }
    ]
  }
  // 不满足条件时返回空数组，不会导致Table报错
  return []
}, [data])

2. 优化useEffect逻辑（可选） #

你原来的useEffect依赖为空数组，内部读取的loadingData永远是初始的true，可以直接去掉冗余判断，增加错误捕获避免接口异常导致页面挂：

useEffect(() => {
  async function getData() {
    try {
      const res = await axios.get("http://localhost:5000/tests")
      setData(res.data);
      setLoadingData(false);
    } catch (err) {
      console.error('数据请求失败:', err)
      // 接口异常时也关闭加载状态，可自行增加错误提示
      setLoadingData(false)
    }
  }
  getData()
}, []);

实现逻辑说明 #

• 你原本已经加了loadingData的条件渲染，只有接口请求完成、loadingData变为false时才会渲染Table组件，此时data已经完成赋值，rowData会基于最新的data自动计算出正确值
• 校验逻辑同时兼容了接口返回数据长度不足、对应属性不存在的边界情况，不会出现初始化报错

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