在 Array.prototype.map() 中解构对象属性答案

【问题标题】：Destructure object properties inside Array.prototype.map()在 Array.prototype.map() 中解构对象属性
【发布时间】：2021-04-10 10:20:18
【问题描述】：

我正在使用 Next.js 并使用以下代码映射出一些组件。一切正常，但我真的很想在这里解构对象属性，以免重复我的道具中的路径

 {sortedData.map((service) => (
          <Article
            key={uuidv4()}
            title={service.fields.title}
            image={service.fields.thumbnail.fields.file.url}
            alt={service.fields.thumbnail.fields.file.fileName}
            slug={service.fields.slug}
            content={service.fields.intro}
            height={service.fields.thumbnail.fields.file.details.image.height}
            width={service.fields.thumbnail.fields.file.details.image.width}
          />
        ))}

我尝试在这里寻找类似的问题，但找不到任何问题。任何帮助表示赞赏

【问题讨论】：

.map(({ fields: { title, ... } }) =>?
如果你不知道如何解构，使用标准方法并引入临时变量：service => { const fields = service.fields; const thumbFile = fields.thumbnail.fields.file; return …; }

标签： reactjs ecmascript-6 destructuring

【解决方案1】：

解构服务对象，示例：

   {sortedData.map(({ fields: { title, thumbnail, slug, intro } }) => (
      <Article
        key={uuidv4()}
        title={title}
        image={thumbnail.fields.file.url}
        alt={thumbnail.fields.file.fileName}
        slug={slug}
        content={intro}
        height={thumbnail.fields.file.details.image.height}
        width={thumbnail.fields.file.details.image.width}
      />
    ))}

【讨论】：