Javascript, в приложении React назначить {} в компоненте функции, обзор кода

Question

У меня есть этот код в моем другом приложении React, и мне нужно понять, что этот код делает явно:

const Component = ()=> (
  <QueryFetcher>
    {({ data }) => {

      const { user: { profile = {} } = {} } = data

      return (
        <div>
          {profile.username && profile.username}
        </div>
      )
    }}
  </QueryFetcher>
)

Для чего нужна эта строка?

const { user: { profile = {} } = {} } = data

правильно назначить что-то для {}, используя { user: { profile = {} } = {} } в этом функциональном компоненте?Или в render() хуке компонента с состоянием в React?

Answer 1

const { user: { profile = {} } = {} } = data в основном означает, что вы извлекаете профиль пользователя.

const означает, что вы создаете новую переменную

{ user: { profile } } } означает, что вы извлекаете профиль внутри пользователя

= {} означает, что если объект не определен, используйте пустой объект, чтобы он не потерпел неудачу, так как выполнение user.profile выдаст ошибку, если пользователь не определен.

= data означает, что вы извлекаете эту информацию из переменной данных

Таким образом, эта строка означает, что из переменных данных вы можете взять пользователя, если пользователь не определен, использовать пустойобъект.Затем зайдите в профиль, если профиль не определен, используйте пустой объект.Затем создайте переменную под названием profile с результатом.Это похоже на это:

const user = data.user === undefined ? {} : data.user;
const profile = user.profile === undefined ? {} : user.profile;

Answer 2

Для чего нужна эта строка?

const { user: { profile = {} } = {} } = data

По сути, это просто цепочка деструктуризации объектов ES6 со значениями по умолчанию.Что эта строка делает словами:

1. Считать «пользователя» из «данных», если «пользователь» не определен, назначить {} в качестве значения по умолчанию
2. Считать «профиль» из"пользователь", если "профиль" не определен, присвойте {} в качестве значения по умолчанию

Это правильно

В основном это сокращенный синтаксисиспользуется для удаления повторяющихся вещей.Таким образом, вместо одновременного доступа к нескольким объектным реквизитам, например,

this.props.prop1, this.props.prop2, ...

, вы можете использовать

const { prop1, prop2 } = this.props;

Это также поможет другим читателям позже быстро понять, какие переменные используются в методе, если все необходимые реквизитыДеструктурированный в начале.