React 18.2.0从API获取数组仅部分渲染的偶现问题求助

可能的原因 #

• API返回数据不完整：网络波动、后端服务偶发异常导致返回数组被截断，仅包含部分数据。
• 错误处理缺失：getSelectedCandidatesAsync的catch块仅打印错误但未返回空数组，若请求出错会导致data为undefined，触发后续逻辑异常。
• dataStore实例重复创建：每次调用dataStore()生成新实例，若内部存在缓存或请求管理逻辑，可能引发数据获取异常。
• 状态更新时机问题：React状态更新的异步特性可能偶发导致showContent先于selectedCandidates完成更新，渲染时数据未完全就绪。

修复与排查步骤 #

1. 完善请求错误处理 #

修改请求函数，确保请求失败时返回空数组，避免后续逻辑因data为undefined出错：

const getSelectedCandidatesAsync = async () => {
  const url = API_ENDPOINT + "/candidates/of-voter";

  try {
    const response = await axios.get(url);
    return response.status === 200 ? response.data : [];
  } catch (err) {
    console.error("获取候选人数据失败:", err);
    return []; // 确保始终返回数组类型
  }
};

2. 添加调试日志定位问题 #

在数据获取和渲染的关键节点添加日志，复现问题时可快速确认数据状态：

// 数据获取阶段日志
getSelectedCandidatesAsync()
  .then((data) => {
    console.log("API返回数据长度:", data?.length);
    if (data.length > 0) {
      setSelectedCandidates(data);
      console.log("更新后的候选人数据:", selectedCandidates);
    } else {
      navigate('vote', { replace: true })
    }
    setShowContent(true)
    setIsLoading(false)
  })

// 渲染阶段日志
console.log("渲染时候选人数据长度:", selectedCandidates.length);
<ul style={{ fontSize: '1.2rem' }}>
  {selectedCandidates.map(item => <li key={item.id}>{item.full_name}</li>)}
</ul>

3. 确保dataStore单例模式 #

避免每次调用dataStore()创建新实例，引发请求逻辑冲突：

// 单例模式改造示例
let dataStoreInstance;
function dataStore() {
  if (dataStoreInstance) return dataStoreInstance;
  dataStoreInstance = {
    getSelectedCandidatesAsync,
    // 其他业务方法
  };
  return dataStoreInstance;
}

4. 优化状态更新逻辑 #

让showContent的更新依赖于selectedCandidates的变化，确保数据就绪后再渲染内容：

// 移除原then中的setShowContent(true)，新增监听逻辑
useEffect(() => {
  if (selectedCandidates.length > 0) {
    setShowContent(true);
  }
}, [selectedCandidates]);

// 原useEffect调整
useEffect(() => {
  if (obj.user === null) {
    navigate("login", { replace: true });
  } else {
    setIsLoading(true);
    getSelectedCandidatesAsync()
      .then((data) => {
        if (data.length > 0) {
          setSelectedCandidates(data);
        } else {
          navigate('vote', { replace: true })
        }
        setIsLoading(false);
      })
  }
}, [])

5. 校验API返回数据格式 #

在前端添加数据格式校验，避免非数组数据引发渲染异常：

.then((data) => {
  if (Array.isArray(data)) {
    if (data.length > 0) {
      setSelectedCandidates(data);
    } else {
      navigate('vote', { replace: true })
    }
  } else {
    console.error("API返回非数组数据:", data);
    setSelectedCandidates([]);
  }
})

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