Чтение свойств вложенного объекта, переданного как свойство в React

Question

Я передаю состояние в качестве реквизита через Context другим компонентам в моем приложении React:

state = { user: null, username: null }

И имя пользователя, и пользователь обновляются с помощью методов setState.

Я могу прочитать свойство username, но не могу прочитать свойство user, которое должно быть вложенным объектом. Пожалуйста, смотрите фотографии: если я передаю весь пользовательский объект, я получаю сообщение об ошибке, говорящее, что есть ключи объекта, но если я пытаюсь прочитать одно из свойств объекта, оно выдает другую ошибку, говорящуючто свойство является нулевым.

Это не имеет никакого смысла, потому что я могу проверить состояние поставщика контекста и все значения вложенного объекта находятся там:

Может ли кто-нибудь помочь с этим - я в полном замешательстве.

Answer 1

Вот как мне удалось добиться того, что я пытался сделать:

{ user && user.username }

Это не выдает ошибку и позволяет мне получить доступ к вложенным свойствам объекта.

Answer 2

Проверьте, не является ли user нулевым, потому что, если user равно null, он вызовет null.username, что приведет к ошибке.setState() является асинхронным, поэтому значение может быть нулевым, что является заданным вами начальным значением.

{
user &&
  <div className='div-player'>
   ...
   ...
  </div>
}