如何在 React 中访问儿童道具

Question

真的很抱歉，我知道这已经发布过，但我只是不明白答案与我的问题有什么关系。 我对反应很陌生，需要比我能找到的更多的帮助。

我的应用项目有这样的评论；

const restaurantData = [
  {
    id: 1,
    restaurantName: "Restaurant 1",
    address: "4, Dolphin Way, Swansea SA10 5BZ",
    lat: 48.8737815,
    long: 2.3501649,
    ratings: [{ ratingID: 1, stars: 2, comment: "Terrible service, Yikes!" }],
  },
];

而且我已经访问了这样的数据没有问题；

function RestaurantItem({ restaurant }) {
  return (
    <div className="restaurantItem" id={restaurant.id}>
      <h2 className="AsideHeader">{restaurant.restaurantName}</h2>
      <p className="AsideAddress">{restaurant.address} </p>
    </div>
  );
}

我基本上想通过这样做来专门访问评论数据；

<div>
  <p>{restaurant.ratings.stars} STAR : </p> {restaurant.ratings.comment}
</div>

但我没有任何运气。 有人可以解释我做错了什么以及如何解决吗？ 或者甚至我会称之为什么来查找解决方案？

谢谢你 ！

Answer 1

由于 restaurant.ratings 是一个列表，因此您不能像字符串一样显示它。

你可以像这样显示它们：

<div>
  {restaurant.ratings.map((rating, index) => (
    <p key={"rating-" + rating.ratingID}>
      {rating.stars + " STAR : " + reating.comment}
    </p>
  ))}
</div>

列表的 map 方法迭代每个元素，并将每个元素作为 JSX 元素作为匿名方法“描述”返回。

Answer 2

ratings是一个数组，因此您不能以ratings.stars或ratings.comment的形式访问数据。

一种方法是使用map迭代评级并显示该特定餐厅的所有评级。

<div>
  {restaurant.ratings.map((rating) => (
    <p key={rating.ratingID}>{`${rating.stars} STAR: ${rating.comment}`}</p>
  ))}
</div>

Answer 3

在您的const restaurantData中， ratings是一个数组。 如果只有 1 个评分，则删除数组： ratings: { ratingID: 1, stars: 2, comment: "Terrible service, Yikes!" } ratings: { ratingID: 1, stars: 2, comment: "Terrible service, Yikes!" }

如果会有多个评级，则使用.map循环每个评级。

  {restaurant.ratings.map((rating) => (
    <div key={rating.ratingID}>
      <p>{rating.stars} STAR : </p> {rating.comment}
    </div>
  ))}

Answer 4

您在数组上调用道具，但您需要在数组元素上调用道具。

如果 ratings 属性总是有一个元素，那么你可以这样写，但这将是一个拐杖

function RestaurantItem({ restaurant }) {
  return (
    <div className="restaurantItem" id={restaurant.id}>
      <h2 className="AsideHeader">{restaurant.restaurantName}</h2>
      <p className="AsideAddress">{restaurant.address} </p>
    </div>
    <div>
    <p>{restaurant.ratings[0].stars} STAR : </p> {restaurant.ratings[0].comment}
</div>
  );
}

@lich 报告正确，要使用数组，您必须使用 map 方法

使用 reactjs 列表看这里

js arrays