创建具有相应值的新数组

Question

我有两个数组，一个带有 react-icon 组件 -

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 }
  ]

我想知道如何创建一个新数组，根据 selectedAmenities 数组中存在的值添加正确的 react-icon 组件属性？

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

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 /> }
      ]

我正在使用带有 React 的 Next.js，并从 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,
 });
});

参考文献

• https://www.w3schools.com/jsref/jsref_find.asp
• https://www.w3schools.com/react/react_es6_spread.asp

Answer 2

您可以使用new Set 创建一个hashMap，然后通过便利设施使用.filter。

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 },
    { name: 'Shower', id: 3, },
    { 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
})