React中如何访问子属性？新手求助获取餐厅评分数据

嘿，别着急！刚接触React和JavaScript对象/数组的时候，很容易踩这种小坑，我来帮你理清楚～

你出错的原因 #

看你的restaurantData里的ratings字段：

ratings: [{ ratingID: 1, stars: 2, comment: "Terrible service, Yikes!" }]

这里的ratings是一个数组（用方括号[]包裹的），而不是单个对象。你直接写restaurant.ratings.stars，相当于在问“这个数组本身有没有stars属性”——显然没有，所以才会出错。你需要先访问数组里的具体元素，再去取它的stars和comment属性。

解决方案分两种情况 #

情况1：每个餐厅只有一条评分（像你的示例一样）

直接取数组的第一个元素（索引为0），同时建议加个判断避免空数组报错：

function RestaurantItem({ restaurant }) {
  return (
    <div className="restaurantItem" id={restaurant.id}>
      <h2 className="AsideHeader">{restaurant.restaurantName}</h2>
      <p className="AsideAddress">{restaurant.address}</p>
      {/* 新增的评分渲染部分 */}
      <div className="rating-section">
        {restaurant.ratings.length > 0 ? (
          <>
            <p>{restaurant.ratings[0].stars} STAR :</p>
            <p>{restaurant.ratings[0].comment}</p>
          </>
        ) : (
          <p>No ratings yet</p>
        )}
      </div>
    </div>
  );
}

如果你的环境支持ES2020+，也可以用可选链操作符简化判断：

<p>{restaurant.ratings[0]?.stars} STAR :</p>
<p>{restaurant.ratings[0]?.comment}</p>

这样如果ratings[0]不存在（比如空数组），就会显示undefined，不会直接报错。

情况2：餐厅可能有多条评分

这时候需要用Array.map()遍历评分数组，渲染每一条评分：

function RestaurantItem({ restaurant }) {
  return (
    <div className="restaurantItem" id={restaurant.id}>
      <h2 className="AsideHeader">{restaurant.restaurantName}</h2>
      <p className="AsideAddress">{restaurant.address}</p>
      <div className="ratings-section">
        {restaurant.ratings.length === 0 ? (
          <p>No ratings yet</p>
        ) : (
          restaurant.ratings.map(rating => (
            // 记得给每个列表项加唯一的key，React需要这个优化渲染
            <div key={rating.ratingID} className="single-rating">
              <p>{rating.stars} STAR :</p>
              <p>{rating.comment}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
}

可以搜索的关键词 #

如果想深入学习相关知识，你可以搜索这些关键词：

• JavaScript 数组访问对象属性
• React 遍历数组渲染列表元素
• React map 列表 key 属性
• JavaScript 可选链操作符

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