React.js条件渲染失效求助：loading与data状态渲染异常

核心问题是拼写错误：你在判断数组长度时写了data.lenght，正确的数组长度属性名是data.length。因为lenght是不存在的属性，始终返回undefined，undefined > 1的结果永远是false，所以这段渲染逻辑永远只会显示"loading2"，不会随data更新而变化。

修复后的关键代码片段 #

把条件渲染部分的代码修改为：

{
  // 修复拼写错误后即可正常更新
  data.length > 0 ? <div>finito2</div> : <div>loading2</div>
}

注：根据你的需求是"data数组为空时显示loading2"，更贴合需求的判断逻辑可以写成：

{
  !data.length ? <div>loading2</div> : <div>finito2</div>
}

额外优化建议 #

• 统一加载状态逻辑：你同时用loading状态和data空值判断加载状态，建议合并逻辑，比如请求完成前依赖loading显示"loading"，请求完成后再根据data是否为空展示对应内容，避免状态冲突。
• 容错处理URL参数：urlParams.get('offset')可能返回null，需要做兜底处理：

function getParam (){
  const urlParams = new URLSearchParams(window.location.search);
  const offset = urlParams.get('offset');
  setCurrentPage(offset ? parseInt(offset) : 1) 
}

• 理解状态更新的异步性：setData是异步操作，在then回调里直接打印data会显示旧值，这是React的正常机制，无需疑惑。

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