Mobx Observable Array

Question

Mobx Observable Array

1

Я застрял в этой неприятной ошибке. У меня есть массив Observable, который я заполняю, используя запрос Axios Get.

getVirtualMachines(){
    request.get('/Home').then(response => {
       console.log(response.data[0].name);
        this.virtualMachines = response.data;
    }).catch(error => {
        console.log(error);
    })
}

Наблюдаемый массив выглядит так:

@observable virtualMachines: [{
    id: string,
    ip: string,
    name: string,
    power: string,
    sku: string
}];

Я называю это uisng componentWillMount(){ this.props.store.getVirtualMachines(); } componentWillMount(){ this.props.store.getVirtualMachines(); }

Теперь в методе рендеринга я это

let vms: VirtualMachine[] = this.props.store.virtualMachines;
console.log(vms);

Все идет нормально. Теперь я пытаюсь сопоставить массив Vms с помощью slice(), чтобы преобразовать наблюдаемый массив в ванильный массив, и я получаю ошибки после ошибок

render(){
let vms: VirtualMachine[] = this.props.store.virtualMachines;
console.log(vms.slice());
....
....
}

Uncaught TypeError: Невозможно прочитать свойство "срез" неопределенного

warning.js: 33 Предупреждение. Может обновлять только смонтированный или монтажный компонент. Обычно это означает, что вы вызывали setState, replaceState или forceUpdate на незамонтированном компоненте. Это не-op.

Я использовал метод среза, выполнив только

console.log(vms.slice());

Newton Sheikh 29 янв. 2018, в 08:29

Источник

Теги:

reactjs

typescript

mobx

mobx-react

1 ответ

Ещё вопросы

Tholle · Accepted Answer · 2018-01-29T10-27-00.000Z

У вас virtualMachines массива virtualMachines на вашем первом virtualMachines. Вы можете сделать что-то подобное, чтобы дать вашему массиву значение по умолчанию для пустого массива:

class Store {
  @observable virtualMachines: [{
    id: string,
    ip: string,
    name: string,
    power: string,
    sku: string
  }] = [];

  getVirtualMachines(){
    request.get('/Home').then(response => {
      this.virtualMachines.replace(response.data);
    }).catch(error => {
      console.log(error);
    });
  } 
}