Ошибка при попытке выполнить map в React

147
01 июня 2019, 20:50

Мне нужно получить с интернета данные, с этим я разобрался - получаю, и сразу же добавляю их в состояние компонента

получаю примерное это:

[object Object], [object Object], [object Object], [object Object], [object Object], [object Object]

Не могу приложить скрин так как показывает на телефоне.

Далее я разбиваю это все методом map, в итоге есть вот это

А так же ошибку:

TypeError: undefined is not an object(evalueting 'this.state.images.map')

Не знаю как тут быть, очень благодарен за помощь!

Answer 1

Итак, начнем с конструктора компонента, там должен быть объявлена ваша переменная в стейте и в ней должно лежать значение null:

constructor(props) {
  super(props);
  this.state = {
    images: null // тут ничего нет в самом начале
  }
  // не забываем про `bind` метода, внутри которого используется `this`
  this.getMoviesFromAviAsync = this.getMoviesFromAviAsync.bind(this);
}

Далее по коду ваш обработчик на загрузку данных и установку в стейт полученных данных, там вопросов нет, кроме одного нюанса, про который я бы хотел сказать, в сучае ошибки я бы рекомендовал положить пустой массив в images переменную стейта:

componentDidMount() {
  this.getMoviesFromAviAsync();
}
getMoviesFromAviAsync() {
  // some code...
  .then(response) {
    this.setState({ images: data });
  }
  // some code...
  .catch(error) {
    this.setState({ images: [] });
    console.error(error);
  }
  // some code...
}

Всё это делается для того, чтобы потом в методе прохода по элементам массива не возникло проблем. Далее метод рендеринга, там тоже буду некоторые рекомендации:

render() {
  const { images } = this.state;
  // если у нас `null` - это условие сработает
  if (!images) {
    return (<p>Loading...</p>)
  }
  // предыдущее условие гарантирует, что в images не лежит `null`
  // но если `length = 0` то в это условие мы попадаем
  if (!images.length) {
    return (<p>Something went wrong or no data...</p>)
  }
  // можно быть уверенным, что в images не `null`, не `undefined` и массив не пустой
  const imgs = images.map((image, index) => {
    return (<Text key={index}>{image.user.name}</Text>);
  });
  return (<View>{imgs}</View>);
}

Обратите внимание на добавленное свойство key - если его не добавить, то React это не понравится и получите ошибки в консоли из-за того, что отрисовываете список значений и у них нет уникального поля key. Об этом можно почитать тут: Lists and Keys.

Причина возникновения ошибки в вашем коде - вы попадаете в метод рендеринга несколько раз и в первые разы у вас там нет значения в стейт у переменной images. При изменении состояния всегда происходит ререндеринг, почитатйте следующую статейку, будет полезно: React.Component

READ ALSO
Как найти точку на расстоянии d от прямой?

Как найти точку на расстоянии d от прямой?

Есть ломаная (задана массивом точек) и нужно найти ломаную, огибающую исходную, наверное более понятно будет на рисунке (синяя - та, которую...

156
Слайдер с бесконечной прокруткой

Слайдер с бесконечной прокруткой

Как сделать слайдер с бесконечной прокруткой, где при нажатии на правую стрелку, например, первый блок за пределами страницы перемещается...

143
Подгрузка внешних JS скриптов &ldquo;по событию&rdquo;

Подгрузка внешних JS скриптов “по событию”

Хочу реализовать следующий подход - подключать некоторые внешние скрипты только если на странице присутствуют DOM элементы использующие...

149
Найти минимальную дату из трех в формате ДД.ММ.ГГГГ?

Найти минимальную дату из трех в формате ДД.ММ.ГГГГ?

Найти минимальную дату из трех в формате ДДММ

168