React中如何访问子属性？餐厅评分数据访问问题求助

首先得指出你踩的小坑：你的ratings是一个数组（看数据里的方括号[]），不是单个对象！你直接用restaurant.ratings.stars是取不到值的，因为数组本身没有stars这个属性，得先访问数组里的具体元素才行。

解决方案分两种情况： #

1. 如果只需要显示第一个评分 #

可以用数组索引直接访问第一个元素，同时最好加个判断防止数组为空报错：

<div>
  {restaurant.ratings.length > 0 ? (
    <>
      <p>{restaurant.ratings[0].stars} STAR : </p>
      <p>{restaurant.ratings[0].comment}</p>
    </>
  ) : (
    <p>No ratings yet</p>
  )}
</div>

2. 如果以后会有多个评分，需要全部显示 #

用React里常用的map方法遍历数组，每个评分单独渲染元素（记得给每个元素加唯一的key，这里用ratingID就很合适）：

<div>
  {restaurant.ratings.length > 0 ? (
    restaurant.ratings.map(rating => (
      <div key={rating.ratingID} className="rating-item">
        <p>{rating.stars} STAR : </p>
        <p>{rating.comment}</p>
      </div>
    ))
  ) : (
    <p>No ratings yet</p>
  )}
</div>

为什么之前的写法不对？ #

JavaScript里，对象用.访问属性（比如restaurant.restaurantName），但数组是有序的集合，得通过索引数字（比如[0]代表第一个元素）或者遍历方法（比如map）来访问里面的内容。你之前直接给数组加.stars，相当于在问“这个数组本身有没有stars属性”，答案当然是没有啦～

可以搜索的关键词 #

如果想找更多相关资料，试试这些关键词：

• React 遍历数组渲染元素
• JavaScript 数组与对象的访问区别
• React 处理数组类型props

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