How to use the mobx.observable.array function in mobx

export const ObjectAPIExample = asComponent(() => {
    class Todo {
        @observable description = '';
        @observable done = false;

        constructor(description) {
            this.description = description;
        }
    }

    const firstTodo = new Todo('Write Chapter');
    const todos = observable.array([firstTodo]);

    // eslint-disable-next-line
    const todosMap = observable.map({
        'Write Chapter': firstTodo,
    });

    // Reactions to track changes
    autorun(() => {
        console.log(`metadata present: ${has(firstTodo, 'metadata')}`);
        console.log(get(firstTodo, 'metadata'), get(firstTodo, 'user'));
        console.log(keys(firstTodo));
    });
    autorun(() => {
        // Arrays
        const secondTodo = get(todos, 1);
        console.log('Second Todo:', toJS(secondTodo));

}
      // if the new version of the store skipped a field, will
      // not assign stored data to it. this method need to the
      // store init the field with a value.
      const desc = Object.getOwnPropertyDescriptor(store, key);
      if (desc && !desc.enumerable && !isFromServer) {
        continue;
      }
      const storeValue = store[key];
      const dataValue = data[key];
      if (deserializers[key] && deserializers[key].deserializer) {
        store[key] = deserializers[key].deserializer(dataValue, storeValue);
      }
      else if (isObservableArray(storeValue)) {
        // mobx array
        store[key] = observable.array(dataValue);
      }
      else if (isObservableMap(storeValue)) {
        // mobx map
        store[key] = observable.map(dataValue);
      }
      else if (isPrimitive(dataValue)) {
        // js/mobx primitive objects
        store[key] = dataValue;
      }
      else if (!storeValue) {
        // if store value is empty, assign persisted data to it directly
        store[key] = dataValue;
      }
      else {
        // nested pure js object or mobx observable object
        parseStore(storeValue, dataValue, isFromServer);

return new Promise((resolve) => {
      let materials = settings.get('materials') || [];

      // 过滤掉隐藏的物料源
      materials = materials.filter((item) => item.checked !== false);

      materials = filterMaterial(materials);
      this.materials = observable.array(materials);
      setTimeout(() => {
        resolve();
      }, 300);
    });
  }

it('should not transform value as it is already in ms', () => {
        const meanPoints = observable.array([{timestamp: 1530844500000, value: 902}]);
        const tp95Points = observable.array([]);
        const tp99Points = observable.array([]);
        const wrapper = shallow();

        expect(wrapper.find(Line).props().data.datasets[2].data[0].y).to.equal(902);
    });
});

sinon.stub(store, 'fetchRelatedTraces', (query) => {
        store.relatedTraces = observable.array(relatedResults);
        store.relatedTracesPromiseState = relatedTracesPromise;
        store.searchQuery = query;
    });

case: ({pending}) => pending()
};

const stubResults = [
    {
        traceId: '15b83d5f-64e1-4f69-b038-aaa23rfn23r',
        root: {
            url: 'test-1',
            serviceName: 'test-1',
            operationName: 'test-1'
        },
        operationName: 'dummy',
        rootError: false,
        spanCount: 12,
        serviceName: 'abc-service',
        services: observable.array([
            {
                name: 'abc-service',
                duration: 89548,
                spanCount: 12
            },
            {
                name: 'def-service',
                duration: 89548,
                spanCount: 29
            },
            {
                name: 'ghi-service',
                duration: 89548,
                spanCount: 31
            }
        ]),

export default function createCollection(options, parentModel, parentModelProp) {
    const ary = observable.array([]);
    if (options) {
        if (options.model) {
            ary.intercept(onCollectionChangeInterceptor(options, parentModel, parentModelProp));
        }
        if (options.extend) {
            if ('function' === typeof options.extend) {
                options.extend(ary);
            } else {
                Object.keys(options.extend).forEach((k) => {
                    Object.defineProperty(ary, k, { value: options.extend[k] });
                });
            }
        }
    }

    return ary;

import { action, computed, observable, reaction } from 'mobx'
import { message } from 'antd'
import { shortUid } from '../utilities/common'
import i18next from '../utilities/i18next'

/** Required store instances. */
import rpc from './rpc'
import wallet from './wallet'

class Network {
  @observable networkInfo = observable.object({})
  @observable peerInfo = observable.array([])
  @observable statsByMinute = observable.array([])

  @observable difficulty = {
    'proof-of-work': 0,
    'proof-of-stake': 0,
    'search-interval': 0
  }

  @observable incentiveInfo = {
    walletaddress: '',
    collateralrequired: 0,
    collateralbalance: 0,
    networkstatus: 'firewalled',
    votecandidate: false,
    votescore: 0
  }

addNodeToCache(node: AnyObjectNode, lastCacheUpdate = true): void {
        if (node.identifierAttribute) {
            const identifier = node.identifier!
            if (!this.cache.has(identifier)) {
                this.cache.set(identifier, observable.array([], mobxShallow))
            }
            const set = this.cache.get(identifier)!
            if (set.indexOf(node) !== -1) throw fail(`Already registered`)
            set.push(node)
            if (lastCacheUpdate) {
                this.updateLastCacheModificationPerId(identifier)
            }
        }
    }

private updateData([slots, lastCompleteEpoch]: [Slot[], string]) {
    this.slots = observable.array(slots);
    this.lastCompleteEpoch = Number(lastCompleteEpoch);
  }