React.js中如何仅展示CarsData数组中的2条数据？

现有CarsData.js文件定义了包含4条汽车信息的数组，当前CardsCars.js组件通过map方法渲染了全部数据，以下是修改代码以仅展示2条数据的几种实用方法：

方法一：使用slice截取前2条数据（推荐） #

这是最简洁直接的方式，利用数组的slice方法截取前2个元素，再进行map渲染：

修改后的CardsCars.js代码：

import CarsData from './CarsData';
import CardCar from './CardCar'; // 确保已引入子组件

const CardsCars = () => {
  // 截取数组前2条数据后渲染
  const card = CarsData.slice(0, 2).map(car => {
    return <CardCar key={car.id} image={car.image} title={car.title} type={car.type}/>
  })

  return (
  <>
    <div className='row'>
        {card}
    </div>
  </>
  )
}

export default CardsCars

注：务必给map返回的元素加上key属性，符合React的性能优化规范。

方法二：过滤指定的2条数据（按需选择特定条目） #

如果不需要固定展示前2条，而是要选择特定的2辆汽车，可以用filter方法筛选对应id的条目：

修改后的CardsCars.js代码：

import CarsData from './CarsData';
import CardCar from './CardCar';

const CardsCars = () => {
  // 自定义要展示的汽车id集合
  const targetCarIds = ['car_01', 'car_03'];
  const card = CarsData.filter(car => targetCarIds.includes(car.id)).map(car => {
    return <CardCar key={car.id} image={car.image} title={car.title} type={car.type}/>
  })

  return (
  <>
    <div className='row'>
        {card}
    </div>
  </>
  )
}

export default CardsCars

方法三：直接取数组前两个元素（硬编码方式，不推荐） #

虽然可行，但灵活性差，仅适合固定需求场景：

const card = [CarsData[0], CarsData[1]].map(car => {
  return <CardCar key={car.id} image={car.image} title={car.title} type={car.type}/>
})

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