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

问题描述

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

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

解决方法

解构服务对象，示例：

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