如何在React.js中展示JSON数据及解决safari_name未定义报错

报错原因 #

你遇到safari_name未定义的报错，是因为对JSON结构的类型判断有误：safarisDetails.safaridetails.safari是数组类型，不是直接的对象，无法直接读取对象属性，需要先取数组元素再访问属性。

具体实现方法 #

1. 渲染safari相关属性 #

分两种场景处理：

• 确认safari数组永远只有1条数据时，直接通过下标[0]读取第一个元素的属性：
  正确写法：{safarisDetails.safaridetails.safari[0].safari_name}
• 如果safari数组可能存在多条数据，用map遍历渲染所有行程：

  {safarisDetails.safaridetails.safari.map(safariItem => (
    <div key={safariItem.id}>
      <h3>{safariItem.safari_name}</h3>
      <p>行程天数：{safariItem.days}天</p>
      <p>参考预算：${safariItem.budget}</p>
      <p>行程介绍：{safariItem.text}</p>
    </div>
  ))}
  

2. 遍历highlight数组 #

注意该字段是二维数组，需要两层map遍历才能拿到所有高亮内容：

{safarisDetails.safaridetails.highlight.map((highlightGroup, groupIdx) => (
  <div key={groupIdx}>
    <h4>行程亮点</h4>
    <ul>
      {highlightGroup.map(highlightItem => (
        <li key={highlightItem.id}>{highlightItem.highlight}</li>
      ))}
    </ul>
  </div>
))}

可选优化：增加空值/加载状态判断 #

避免数据还没加载完成就渲染导致报错：

function SafariPage() {
  // 此处替换为你实际的状态变量
  const [safarisDetails, setSafarisDetails] = useState({ loading: true, safaridetails: {} })

  if (safarisDetails.loading) return <div>行程数据加载中...</div>
  if (!safarisDetails.safaridetails.safari?.length) return <div>暂无相关行程数据</div>

  return (
    <div className="safari-container">
      {/* 上述渲染逻辑放在此处 */}
    </div>
  )
}

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