React仪表盘中等待API数据时如何显示回退值？

几种更贴合React场景的实现方式 #

你的原始写法已经比较简洁了，这里提供几种优化方向，可根据具体场景选择：

• 用空合并运算符（??）替代逻辑或（||）
  逻辑或会把空字符串、0等假值也替换成回退内容，如果用户的firstName可能存在空字符串这类合法值，用??更精准——它只在值为null或undefined时触发回退：

  <h2 className="mb-4">Hi, {user?.firstName ?? '{name}'}!</h2>
  

• 提前解构+默认值
  如果组件内需要多次使用user的属性，可以在解构时设置默认值，让模板代码更简洁：

  const { firstName = '{name}' } = user || {};
  // 模板中直接引用
  <h2 className="mb-4">Hi, {firstName}!</h2>
  

• 条件渲染完整问候语
  如果需要在数据未加载时显示完全不同的提示（比如加载状态），可以用三元表达式明确区分：

  <h2 className="mb-4">
    {user?.firstName ? `Hi, ${user.firstName}!` : 'Hi, {name}!'}
  </h2>
  

你的初始写法已经满足基础需求，上述方案中：空合并写法更严谨，解构写法适合多场景复用，条件渲染适合需要区分加载状态的场景。

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