Как достучаться до вложенного объекта с данными в state?

Question

[dmitriu256]

Как правильно отобразить данные из state.user c двойной вложенностью?
Что имею ввиду - в объекте state храниться объект user, который включает в себя еще несколько объектов.
При выводе на странице данных первого уровня вложенности - все выводиться отлично

<h2>Name: {this.state.user.name}</h2>
                <p>UserName: {this.state.user.username}</p>

Вложенность вида вызывает ошибки
<p>Srtreet : {this.state.user.address.street}</p>

Ошибки

index.js:1 The above error occurred in the <UsersDetails> component:
Cannot read property 'street' of undefined // в state данные присутствуют

Объект имеет следующий вид


В JavaScript строка вида успешно отобразит данные любого вида вложенности.
console.log(state.user.address.street);

Answer 1

[Антон Иванов]

Ваш объект еще не успел получить данные в момент одного из рендеров. Исправляется просто:

<p>Srtreet: {this.state.user.address && this.state.user.address.street}</p>

Comments

[dmitriu256]

Антон, спасибо за помощь.
Запись выглядит очень громоздко, если обращаемся к объекту geo внутри address

<p>Geo: {this.state.user.address && this.state.user.address.geo && this.state.user.address.geo.lat}</p>

Может есть еще способы более удобного вывода подобных данных?

[yaroslav1996]

dmitriu256, можете воспользоваться современными JS синтаксисом и оператором Optional Channing - https://developer.mozilla.org/ru/docs/Web/JavaScri...

Но стандартное решения проблемы, вам привели выше.

<p>{this.state.user.address?.geo?.lat}</p