Мне нужно получить с интернета данные, с этим я разобрался - получаю, и сразу же добавляю их в состояние компонента
получаю примерное это:
[object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Не могу приложить скрин так как показывает на телефоне.
Далее я разбиваю это все методом map, в итоге есть вот это
А так же ошибку:
TypeError: undefined is not an object(evalueting 'this.state.images.map')
Не знаю как тут быть, очень благодарен за помощь!
Итак, начнем с конструктора компонента, там должен быть объявлена ваша переменная в стейте и в ней должно лежать значение 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
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть ломаная (задана массивом точек) и нужно найти ломаную, огибающую исходную, наверное более понятно будет на рисунке (синяя - та, которую...
Как сделать слайдер с бесконечной прокруткой, где при нажатии на правую стрелку, например, первый блок за пределами страницы перемещается...
Хочу реализовать следующий подход - подключать некоторые внешние скрипты только если на странице присутствуют DOM элементы использующие...
Найти минимальную дату из трех в формате ДДММ