创建具有相应值的新数组

Question

我有两个阵列，一个带有反应图标组件 -

const amenities = [
  {
    id: 1,
    name: "Wifi",
    icon: <FaWifi />
  },
  {
    id: 2,
    name: "Kitchen",
    icon: <FaUtensils />
  },
  {
    id: 3,
    name: "Shower",
    icon: <FaShower />
  },
  {
    id: 4,
    name: "Bath",
    icon: <FaBath />
  },
  {
    id: 5,
    name: "Disabled Access",
    icon: <FaWheelchair />
  },
  {
    id: 6,
    name: "Lift",
    icon: <GrElevator />
  },
  {
    id: 7,
    name: "Air Con",
    icon: <TiWeatherSnow />
  },
  {
    id: 8,
    name: "Downtown",
    icon: <FaCity />
  },
  {
    id: 9,
    name: "Coffee Maker",
    icon: <FaCoffee />
  },
  {
    id: 10,
    name: "Public Transport",
    icon: <FaSubway />
  },
  {
    id: 11,
    name: "Landmarks",
    icon: <FaToriiGate />
  },
  {
    id: 12,
    name: "Nice Scenery",
    icon: <FaImage />
  },
]

没有那个的是来自没有图标的后端属性

chosenAmenities: [
    { name: 'Wifi', id: 1 },
    { id: 3, name: 'Shower' },
    { name: 'Air Con', id: 7 }
  ]

我想知道如何创建一个新数组，根据 chosenAmenities 数组中存在的值添加正确的反应图标组件属性？

我已经能够像这样成功地添加一个“测试”值...

const updatedAmenitites = amenities.map(obj => ({...obj, test: "test"}));

但是我正在努力弄清楚如何将其作为最终产品显示在前端：

updatedAmenities: [
        { name: 'Wifi', id: 1, icon: <FaWifi /> },
        { id: 3, name: 'Shower', icon: <FaShower /> },
        { name: 'Air Con', id: 7, icon: <TiWeatherSnow /> }
      ]

我正在使用 Next.js 和 React 并从 firebase 获取作为上下文的后端。

谢谢！

Answer 1

您可以只映射您在 chosenAmenities.

中的 id 属性

const amenities = [
  {
    id: 1,
    name: "Wifi",
    icon: <FaWifi />,
  },
  {
    id: 2,
    name: "Kitchen",
    icon: <FaUtensils />,
  },
];

const chosenAmenities = [
  { name: "Wifi", id: 1 },
  { id: 3, name: "Shower" },
  { name: "Air Con", id: 7 },
];

const updatedAmenities = chosenAmenities.map((e) => {
 const amenity = amenities.find((i) => i.id === e.id);
 if(!amenity) return e;
 return ({
  ...e,
  icon: amenity.icon,
 });
});

参考资料

Answer 2

您可以使用新的 Set 创建一个 hashMap，然后通过便利设施进行过滤。

const amenities = [{ id: 1,name: "Wifi",icon: '<FaWifi />'},{id: 2,name: "Kitchen",icon: '<FaUtensils />'},{id: 3,name: "Shower",icon: '<FaShower />' },{id: 4,name: "Bath",icon: '<FaBath />'},{id: 5,name: "Disabled Access",icon: '<FaWheelchair />'},{id: 6,name: "Lift", icon: '<GrElevator />'},{
id: 7,name: "Air Con",icon: '<TiWeatherSnow />'},{id: 8,name: "Downtown", icon: ' <FaCity />'},{id: 9,name: "Coffee Maker",icon: '<FaCoffee />'},{id:10, name: "Public Transport", icon: '<FaSubway />'},{id: 11,name: "Landmarks",icon: '<FaToriiGate />'},{id: 12,name: "Nice Scenery",icon: '<FaImage />' },]


const chosenAmenities = [
    { name: 'Wifi', id: 1 },
    { id: 3, name: 'Shower' },
    { name: 'Air Con', id: 7 }
 ];
  
const hashMap = new Set((chosenAmenities).map(({id}) => id))

const result = amenities.filter(({id}) => hashMap.has(id))

console.log(result)

Answer 3

您可以使用 Array.find() 并通过 Id 搜索相关对象

const updatedAmenitites = chosenAmenities.map(ca=> amenities.find(a=>a.id===ca.id))

Answer 4

按照您的路线，这是另一种解决方案

const updatedAmenitites = chosenAmenities.map(obj => {
  ...obj,
  icon: amenities[amenities.findIndex(a => a.id === obj.id)].icon
})

创建具有相应值的新数组

Creating new array with corresponding values

javascript

reactjs

next.js