Почему не получается слепить 2 полученных массива в 1?

Question

[anton_trofimov95]

Пишу такой код:
Vue:

data() {
    return {
      info: null,
      users: null
    };
  },
  mounted() {
    this.axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(response => (this.info = response.data));
    this.axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(response => (this.users = response.data));
  },
  computed: {
    fullArray() {
      return this.info.concat(this.users)
    }
  }

Html:

<div id="app">
    {{fullArray}}
    <div>
      <ul>
        <li class="box" v-for="(item,index) in info" :key="item.id">{{info[index].body}}</li>
      </ul>
      <ul>
        <li class="users" v-for="(user,index) in users" :key="user.id">{{users[index].name}}</li>
      </ul>
    </div>
  </div>

2 массива по отдельности получил, вывел на страницу, все норм. Но почему-то слить их не получается, в консоли выдает ошибку

TypeError: Cannot read property 'concat' of null

и совсем не рендерит компонент. Если убрать computed, то всё, конечно же, хорошо рендерится. Я пытаюсь сделать тестовое задание, как там видно, нужно получить имя с одного запроса, текст комментария с другого и вывести это в одном элементе списка
{{fullArray}} просто для проверки вывел
В чем ошибка и как в итоге их объединить?

Answer 1

[Alex]

Потому что сначала компонент отображается, а потом приходят данные. И в момент первого вычисления fullArray this.info === null

UPD
Добавьте проверку, что-то в таком духе:

fullArray() {
  const arr = []

  if (this.info) arr.concat(this.info)
  if (this.users) arr.concat(this.users)

  return arr
}

Comments

[anton_trofimov95]

Alex, спасибо. Получается надо получать их перед отрисовкой и вначале это где?

[Alex]

Порядок работы такой:

1. Компонент создаётся. Срабатывает хук created().
   
2. Компонент монтируется. Так как в шаблоне используется fullArray — от он вычисляется. В этот момент данные ещё не загружены. Отсюда и ошибка.
3. Срабатывает хук mounted(). И запускается загрузка данных.
   
4. Проходит какое-то время данные загружаются, и вычисляемые свойства пересчитываются.
   

Обычно сетевые запросы вызывают в хуке created. Но данные не успеют вернутся до хука mounted(). Поэтому в вашем вычисляемом свойстве нужно предусматривать случаи:

1. Когда ни один источник ещё не ответил
   
2. Когда ответил один источник но не ответил второй
   
3. Когда ответили оба источника
   
4. Когда один или несколько источников вернули ошибку или не те данные
   

[anton_trofimov95]

Alex, по той проверке, что вы указали, в массив ничего не приходит, он остается пустым. Где мне написать свойство, которое будет ждать, пока поступят данные?

[Alex]

anton_trofimov95, Ну, чуть ошибся. Вы ж хоть проверяйте код который тут пишут:)

fullArray() {
        let arr = [];

        if (this.info) arr = arr.concat(this.info);
        if (this.users) arr = arr.concat(this.users);

        return arr;
      }

Answer 2

[0xD34F]

Cannot read property 'concat' of null

В чем ошибка и как в итоге их объединить?

Так написано же в чём - не удаётся прочитать свойство concat у null. Вы пытаетесь выполнять какие-то действия над свойствами компонента, как над массивами, но данные ещё не загрузились, и они (свойства) всё ещё null.

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

computed: {
  fullArray() {
    const { users, info } = this;

    return user && info
      ? здесь объединяете данные массивов
      : [];
  },
},

Или установите в качестве начальных значений пустые массивы вместо null.