Question

我遇到了这个令人讨厌的错误。我有一个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 Array看起来像

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

我打电话给这个uisng componentWillMount(){ this.props.store.getVirtualMachines(); }

现在在渲染方法中，我就是这个

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

到目前为止一切顺利。现在我试图使用slice（）映射Vms数组，将可观察数组转换为vanilla数组，并在错误后得到错误

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

未捕获的TypeError：无法读取属性＆＃39; slice＆＃39;未定义的

warning.js：33警告：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState，replaceState或forceUpdate。这是一个无操作。

我只使用切片方法

console.log(vms.slice());

Answer 1

您的首次渲染中没有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);
    });
  } 
}

Mobx Observable Array

1 个答案: