React Native - второй вызов API не возвращает значение

Моя проблема в том, что мой код возвращает неопределенное значение из-за моего второго вызова API:

render(){
    const result_postid = this.state.data_one.map(function(val) {
     return val.postid;
   }).join(',');

   const result_spaceid = this.state.data_one.map(function(vall) {
    return vall.spaceid;
  }).join(',');

   //These two will receive values.

    const result_image = this.state.data_two.map(function(valll) {
      return valll.image;
    }).join(',');

   //This last one somehow will not receive value
}

Здесь я получаю два API из одного и того же componentDidMount:

 componentDidMount(){
     //First API Call
     fetch(`http://www.exmaple.com/React/data.php`, {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     },
   }).then((response) => response.json())
       .then((responseJson) => {
        this.setState({
          isLoading: false,
          data_one: responseJson,
          },function() {
          });


   }).catch((error) => {
     console.error(error);
   });

   // Second API Call
   fetch(`http://www.example.com/React/image_data.php`, {
   method: 'POST',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json',
   },
 }).then((response) => response.json())
     .then((responseJson) => {

      this.setState({
        data_two: responseJson, 
        },function() {
        });

 }).catch((error) => {
   console.error(error);
 });

}

Чтобы подтвердить, что это была не просто проблема с ответом на данные, я удалил первый из const (result_postid) и (result_spaceid), и ошибка исчезла (TypeError: undefined is not a function (evaluating 'this.state.data_two.map(function(valll){return valll.image}')). Данные отображаются успешно, но мне нужно, чтобы все 3 const вернули значение. Есть ли способ вернуть все значения для всех 3 const?

Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
2
0
742
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

constructor(props) {
   super(props);

   this.state = {
       data_one: [],
       data_two: []
   }
}

Таким образом, значения не могут быть неопределенными. Когда API возвращает значение, setState снова запускает рендеринг.

Кроме того, почему у вас есть пустая функция в setState в обратных вызовах?

Должно получиться что-то вроде

this.setState({
    data_two: responseJson, 
});

Пара рекомендаций:

  1. Используйте camelCase для именования переменных, _ не является обычным стандартом в JS
  2. Переместите вызовы API в другой файл, чтобы упорядочить компонент. Затем из componentDidMount вы просто вызываете функцию, чтобы сделать запрос.

Это сработало, спасибо вам большое! Что касается этого вопроса, я действительно не знаю, почему он у меня есть, он был там из предыдущего ответа на вопрос, и я поднял его. Я новичок в React Native. Я также сделаю больше camelCasing и перенесу вызовы API в разные файлы. Еще раз спасибо! @CarolinaAguilar

Laney Williams 23.05.2018 04:04

Другие вопросы по теме