在reactJS中重用标记和最佳实践

我正在学习react，并尝试重用代码（有人告诉我这是react的一大优点）。我目前有如下标记，其中包含像这样导入的数据集。我曾尝试使用

.map

遍历数据集，但事实证明这很困难。当涉及到数据循环时，是否有一个最佳实践（稍微集中讨论，而不是像堆栈溢出概述那样负责，但我正在尝试学习）。谢谢

JS

---

因此，假设您有一些小组件，您想使用它们只渲染一个推荐的活动链接。它看起来像这样

const RecommendedActivity = ({activity}) => {
  return (
    <Link className="PageCell  recommended" to={`/places/top-activities/${activity.id}`}>
      <div className="restaurantCard-main recommended">
        <span className="host-recommendation-text">Host recommended</span>
        <div className="restaurantCard recommended">
          <img className="photo activity" src={activity.image_url} size="small" alt="activities" />
          <div className="restaurantCard-right">
              <div className="name">{activity.name}</div>
              <div className="description"><p>{activity.description}</p></div>
          </div>
        </div>
      </div>
    </Link>
  )
}

---

缺少a）在最末端

{seed.map（（activity，idx）=>）}

啊，捕捉得好！我应该在我的代码编辑器中写下它，这样像那样愚蠢的错误就可以被当场抓住了哈哈！

export const recommendedActivities4 = {  
      description: 'One of the best spots in SFs Famous: North Beach. Grab a coffee and just people watch for hours!',
      id: 'tartine-bakery-and-cafe-san-francisco',
      name: 'Tartine Bakery & Cafe',
      image_url: 'https://s3-media3.fl.yelpcdn.com/bphoto/vTLu8G86IqIazm7BRqIH4g/o.jpg',
      is_closed: false,
      url:
        'https://www.yelp.com/biz/nopa-san-francisco?adjust_creative=oj0judbJDVIHIVps_GJrXQ&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=oj0judbJDVIHIVps_GJrXQ',
      review_count: 4636,
      categories: [
        {
          alias: 'newamerican',
          title: 'American (New)',
        },
        {
          alias: 'modern_european',
          title: 'Modern European',
        },
      ],
      rating: 4,
      coordinates: {
        latitude: 37.774905,
        longitude: -122.437506,
      },
      transactions: ['restaurant_reservation'],
      price: '$$$',
      location: {
        address1: '560 Divisadero St',
        address2: null,
        address3: '',
        city: 'San Francisco',
        zip_code: '94117',
        country: 'US',
        state: 'CA',
        display_address: ['560 Divisadero St', 'San Francisco, CA 94117'],
      },
      phone: '+14158648643',
      display_phone: '(415) 864-8643',
      distance: 255.549722789804,
}

const RecommendedActivity = ({activity}) => {
  return (
    <Link className="PageCell  recommended" to={`/places/top-activities/${activity.id}`}>
      <div className="restaurantCard-main recommended">
        <span className="host-recommendation-text">Host recommended</span>
        <div className="restaurantCard recommended">
          <img className="photo activity" src={activity.image_url} size="small" alt="activities" />
          <div className="restaurantCard-right">
              <div className="name">{activity.name}</div>
              <div className="description"><p>{activity.description}</p></div>
          </div>
        </div>
      </div>
    </Link>
  )
}

{ seed.map( (activity, idx) => <RecommendedActivity activity={activity} key={idx}/>)}