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

Question

我正在使用 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}
          />
        ))}

我试着在这里寻找类似的问题，但没有找到。感谢任何帮助

Answer 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}
      />
    ))}

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

Destructure object properties inside Array.prototype.map()

destructuring

ecmascript-6

reactjs