0

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

введите сюда описание изображения

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

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

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

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

введите сюда описание изображения

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

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

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

1 ответ 1

3

Итак, начнем с конструктора компонента, там должен быть объявлена ваша переменная в стейте и в ней должно лежать значение 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

1
  • к сожалению этот способ не помог, так как теперь всегда висит надпись Loading, хотя элементы давно загружены, и alert об этом сообщает 31 дек 2018 в 16:45

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.