React JS 如何将数组复制到对象/字典数组中答案

【问题标题】：React JS how to copy array into object/dictionary arrayReact JS 如何将数组复制到对象/字典数组中
【发布时间】：2022-11-27 23:16:30
【问题描述】：

我有下面的列表代表来自 Flask 后端的图像源，

[
   "www.example.com","www.example2.com","www.example3.com"...
]

现在我正在尝试使用 react react-image-gallery 来显示所有这些图像。从教程中我看到我需要像下面这样：

const images = [
  {
    original: "www.example.com",
    thumbnail: "www.example.com/thumbnail",
  }
]

我对如何将图像 URL 的数组列表映射到此对象/字典数组感到困惑？理想情况下，我需要让它像：

const images = [
  {
    original: "www.example.com",
    thumbnail: "www.example.com/thumbnail",
  },
  {
    original: "www.example2.com",
    thumbnail: "www.example2.com/thumbnail",
  },
  {
    original: "www.example3.com",
    thumbnail: "www.example3.com/thumbnail",
  }......
]

谁能赐教吗？任何帮助都感激不尽！

【问题讨论】：

标签： reactjs

【解决方案1】：

只需使用map

const list = [
   "www.example.com","www.example2.com","www.example3.com",
  
]

const result = list.map(item => {
  return {
     original: item,
     thumbnail: `${item}/thumbnail`,
  }
})

console.log(result)

【讨论】：

【解决方案2】：

您可以 map over source array 作为：

const srcArr = ["www.example.com", "www.example2.com", "www.example3.com"]

const result = srcArr.map(original => ({ original, thumbnail: `${original}/thumbnail`}));
console.log(result)

【讨论】：

【解决方案3】：

Array.prototype.map() 是个不错的选择。

也许你应该学习Arrayhere的一些原型方法。

【讨论】：