React: ошибка "TypeError: Cannot destructure property 'children' of 'undefined'"

Ошибка "TypeError: Cannot destructure property 'children' of 'undefined'" в React возникает, когда код пытается деструктурировать свойство children из объекта, который оказался undefined. Рассмотрим, почему возникает эта ошибка, как её устранить и как улучшить обработку подобных ситуаций в React-компонентах.

Почему возникает ошибка "Cannot destructure property 'children' of 'undefined'"

Эта ошибка чаще всего связана с попыткой деструктурировать свойства объекта, который не был передан в компонент или не инициализирован. В React передача children осуществляется через пропсы, и если по какой-то причине объект с пропсами не передан, то попытка деструктуризации children вызовет ошибку.

Пример возникновения ошибки

Рассмотрим пример компонента, который пытается деструктурировать children из пропсов:

function MyComponent({ children }) {
  return <div>{children}</div>;
}

function App() {
  // Здесь  вызывается без детей, но ошибка может возникнуть, если компонент вызван без объекта пропсов
  return <MyComponent />;
}

export default App;

Здесь ошибка может возникнуть, если MyComponent рендерится без пропсов или если родительский компонент не передаёт объект пропсов.

Исправление ошибки: назначение значений по умолчанию

Чтобы избежать этой ошибки, можно указать значения по умолчанию для пропсов. Это позволяет избежать undefined, даже если объект пропсов не передан:

function MyComponent({ children = null }) {
  return <div>{children}</div>;
}

export default MyComponent;

В этом случае children будет иметь значение null по умолчанию, и ошибка не возникнет даже при отсутствии пропсов.

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

Кроме явного указания в теле функции, можно также задать значение по умолчанию на уровне параметра функции:

function MyComponent({ children } = {}) {
  return <div>{children}</div>;
}

export default MyComponent;

Здесь используется объект {} как значение по умолчанию, что позволяет избежать ошибки при отсутствии пропсов.

Советы по предотвращению ошибки

• Устанавливайте значения по умолчанию: Использование значений по умолчанию для пропсов — надёжный способ предотвратить ошибки деструктуризации.
• Проверяйте обязательные пропсы: Если children или другие пропсы необходимы, убедитесь, что родительский компонент передаёт их при рендере.
• Используйте PropTypes или TypeScript: Эти инструменты помогают указать обязательность пропсов и типы, предотвращая возможные ошибки.

Дополнительные ресурсы и мероприятия

Узнайте больше о работе с рефами в React и о том, как справляться с подобными предупреждениями в статье React: как справиться с предупреждением "Function components cannot be given refs".