Как: исправить ошибку типа ReactJS - не удается прочитать свойство 'map' неопределенного

#javascript #reactjs

#javascript #reactjs ( реакция ) #reactjs

Вопрос:

Работаю с компонентом material-ui header, и я сталкиваюсь с этой ошибкой :

На что мне следует обратить внимание, чтобы отладить это в первую очередь? Снова сосредоточившись на веб-разработке и борясь с мелочами.

 TypeError: Cannot read property 'map' of undefined


src/Components/Header.js:53


  50 |     Sign up
  51 |   </Button>
  52 | </Toolbar>
> 53 | <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
     | ^  54 |   {sections.map((section) => (
  55 |     <Link
  56 |       color="inherit"

1. Ошибка в том, Cannot read property 'map' of undefined что вы пытаетесь .map что-то undefined . Посмотрите на свой код, что вы пытаетесь .map ?

2. либо разделы не определены, либо разделы не являются массивом

Ответ №1:

Чтобы отладить это, взгляните на ошибку: Cannot read property 'map' of undefined
JavaScript сообщает вам, что где-то (трассировка стека обычно сообщает вам, в какой строке) вы пытались прочитать свойство map для объекта, который undefined
Взгляните на этот фрагмент, который выдаст ту же ошибку:

 let sections; // sections= undefined
sections.map();
// Uncaught TypeError: Cannot read property 'map' of undefined

map() — это функция, исходящая из Array.prototype, что означает, что вам нужно вызвать ее в массиве:

 const sections = [1,2,3];
sections.map(...);
// works, because sections is an array.

Чтобы быть более конкретным в вашем коде, sections переменная не определена, а не является массивом, как вы, вероятно, ожидаете.
Что вы можете сделать, это одно из:

используйте шаблон условного рендеринга:

sections amp;amp; sections.map(...)
Инициализируйте разделы в пустой массив.

Оба, вероятно, будут работать. Решите, какое из них является правильным решением для вас.

Ответ №2:

Или вы можете использовать необязательную цепочку ссылок на javascript

sections?.map

даже если значение sections не определено, оно не выдаст ошибку.

Ответ №3:

Это потому, что sections не определено во время рендеринга (вероятно, из-за асинхронного поведения). Вы можете исправить это с помощью троичного оператора —

condition ? truthy expression : falsy expression

 { sections.length ? sections.map((section) => <Link color="inherit" ...
   : <p class="errorMsg"> No sections can be displayed. </p>