«Невозможно прочитать свойство« узел »неопределенного» Ошибка при доступе к данным из массива в моем состоянии

Question

Привет, я создаю приложение, которое извлекает изображения из Instagram с помощью ax ios. В моем состоянии мне удалось поместить файлы изображений в массив, называемый «сообщениями». У меня нет проблем с просмотром этого массива, чтобы вернуть JSX каждого изображения. Но когда я пытаюсь получить доступ к указанному элементу c в этом массиве, ie. [2] или [3] Я просто получаю эту ошибку:

Uncaught TypeError: Cannot read property 'node' of undefined

Вот как выглядит функционирующий l oop:

const posts = this.state.posts.map((post, id) => {
            const image = post.node.display_resources[0].src     
            console.log(post);
 })

В журнале это возвращает: {node: { …}}

И когда я регистрирую: post.node, я получаю все его содержимое, которое мне и нужно.

Однако даже если я регистрирую: this.state.posts [0] Я получаю то же самое: {node: {…}}

Когда я пытаюсь: this.state.posts [0] .node, я просто получаю эту ошибку:

Uncaught TypeError: Cannot read property 'node' of undefined

Answer 1

Если вы извлекаете данные внутри метода жизненного цикла componentDidMount, данные будут доступны после первого монтирования, что означает, что когда компонент отрисовывается в первый раз, this.state.posts остается пустым массивом.

Вы должны проверить, доступны ли данные и заполнено ли this.state.posts, тогда вы должны получить доступ к данным.

Пример ..

if (this.state.posts.length) { 
  console.log(this.state.posts[0].node) // will log the data
}