Блог

Главная - Вопросы по программированию - Свойства объекта разрушения внутри Array.prototype.map()

Свойства объекта разрушения внутри Array.prototype.map()

#reactjs #ecmascript-6 #destructuring

#reactjs #ecmascript-6 #деструктурирование

Вопрос:

Я использую 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}
          />
        ))}

Я попытался найти похожие вопросы здесь, но не смог найти ни одного. Любая помощь приветствуется

Комментарии:

1. .map(({ fields: { title, ... } }) => ?

2. Если вы не знаете, как выполнить деструктурирование, используйте стандартный подход и вводите временные переменные: service => { const fields = service.fields; const thumbFile = fields.thumbnail.fields.file; return …; }

Ответ №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}
      />
    ))}