Уничтожить ES6 в React реквизитах

Question

Я хочу деструктурировать свой реквизит на два уровня вниз. Я знаю, что вы можете сделать это так:

const MyComponent = ({ aPropOneLevelDown: { anotherPropButTwoLevelsDown } }) => { ... }

Я знаю, что это будет работать, но проблема в том, когда aPropOneLevelDown еще не определено. Затем я получаю сообщение об ошибке: Uncaught TypeError: Невозможно прочитать свойство 'anotherPropButTwoLevelsDown' с неопределенным значением

Что я могу сделать, чтобы сохранить преимущество разрушения?

Answer 1

Использовать реквизиты по умолчанию

Как это

const MyComponent = ({aPropOneLevelDown: { anotherPropButTwoLevelsDown } = {}}) => {}

Или это

const MyComponent = ({aPropOneLevelDown: { anotherPropButTwoLevelsDown }}) => {}

MyComponent.defaultProps = {
    aPropOneLevelDown: {}
}