Обозначение присваивания деконструкции

avatar
Casey
9 августа 2021 в 05:49
39
1
2

Я использую этот пример для создания блога с Гэтсби.

В этом руководстве обозначения присваивания используются следующим образом:

export default function Index({ data }) {

  const { edges: posts } = data.allMarkdownRemark

  return (
    <div className="blog-posts">
      {posts
        .filter(post => post.node.frontmatter.title.length > 0)
        .map(({ node: post }) => {
          return (...);
        })}
    </div>
  )
}

Строка 2, которая кажется мне деконструирующим заданием, сбивает меня с толку. Из какого словаря мы присваиваем ключу edges значение posts? Почему мы можем ссылаться на posts позже, не используя ключ edges?

Источник
Andy
9 августа 2021 в 05:55
2

Это по-прежнему деструктурирующее задание. Все, что он делает, это переименовывает свойство edge в "posts". Я часто делаю это, чтобы сделать код более читабельным, если, например, получаю данные из незнакомого API.

Ответы (1)

avatar
Radu Diță
9 августа 2021 в 06:09
3

Вы наткнулись на деструктуризацию и присвоение новой переменной.

Вы можете найти документы здесь и прокрутить вниз до Assigning to new variable names.

Что он делает, так это то, что вы объявляете новую переменную (в вашем случае с именем posts, которая имеет значение data.allMarkdownRemark.edges.

Синтаксис может показаться обратным, поскольку edges присваивает значение posts, а не наоборот, но я думаю, что это имеет смысл, если немного подумать.

Таким образом, вы можете изменить следующее:

const { edges } = data.allMarkdownRemark

к этому:

const { edges: posts } = data.allMarkdownRemark

с минимальными изменениями.