How to use the mobx.toJS function in mobx

width: window.innerWidth,
            height: window.innerHeight
          }
        }

        const feedback = getRoot(self).feedback
        if (feedback.isValid) {
          metadata.feedback = toJS(feedback.rules)
        }

        // TODO store intervention metadata if we have a user...
        self.updateClassificationMetadata(metadata)

        classification.completed = true
        // Convert from observables
        const classificationToSubmit = toJS(classification, { exportMapsAsObjects: false })
        delete classificationToSubmit.id // remove temp id
        classificationToSubmit.annotations = convertMapToArray(classificationToSubmit.annotations)

        const convertedMetadata = {}
        Object.entries(classificationToSubmit.metadata).forEach((entry) => {
          const key = _.snakeCase(entry[0])
          convertedMetadata[key] = entry[1]
        })
        classificationToSubmit.metadata = convertedMetadata

        const subject = getRoot(self).subjects.active
        self.onComplete(classification.toJSON(), subject.toJSON())

        if (process.browser) {
          console.log('Completed classification', classificationToSubmit)
        }

setSearch(search) {
    const _query = { ...toJS(this.query), ...search };
    const _slug = _query.slug;
    const _limit = parseInt(_query.limit, 10);
    delete _query.slug;

    // Handle deleting query params
    for (const key of Object.keys(_query)) {
      if (_query[key] === null) {
        delete _query[key];
      }
    }

    // Validate limit
    _query.limit = inPageSizes(_limit) ? _limit : PAGE_SIZES._20;
    let urlQueryString = "";
    Object.keys(_query).forEach((key, index, arr) => {
      urlQueryString += `${key}=${_query[key]}`;

it('Query can contain arrays', () => {
    store.updatePathAndQuery('/hello', { values: ['A', 'B'] });
    expect(toJS(store.query.get('values'))).toMatchObject(['A', 'B']);
    expect(store.currentUrl).toBe('/hello?values=A&values=B');
  });
});

const EditFieldBase = ({ form, onCancel, onSubmit, field, schema, availableFields }: IProps) => {
  const { getFieldDecorator } = form;

  const [autoName, setAutoName] = useState(form.getFieldValue('name') === '');

  const type = form.getFieldValue('type');
  const theField = get(fields, type);
  const SchemaSettingsComponent = get(theField, 'SchemaSettingsComponent', () => null);
  const fromAvailableField = availableFields.find(f => f.type === type);

  const options = defaultsDeep(
    {},
    field ? toJS(field.options) : {},
    fromAvailableField ? toJS(fromAvailableField.defaultOptions) : {}
  );

  const onFormSubmit = async (e: any) => {
    e.preventDefault();
    form.validateFieldsAndScroll(async (error, values) => {
      if (!error) {
        const result = {
          ...field,
          ...values,
        };

        if (SchemaSettingsComponent && SchemaSettingsComponent.BEFORE_SUBMIT) {
          await SchemaSettingsComponent.BEFORE_SUBMIT(result.options);
        }

        await onSubmit(result);

render() {
    const { stores } = this.props
    const { profileStore, sponsorStore } = stores
    const { profile } = toJS(profileStore)
    const { proposal } = toJS(sponsorStore)
    const { sponsorProposalStartAt,  sponsorProposalFinishAt} = stores.scheduleStore.schedule

    if (!profileStore.isInitialized) {
      return 
    }

    if (isFuture(sponsorProposalStartAt)) {
      return 
    }

    if (!profileStore.isAgreed) {

        toDB: (value: any) => JSON.stringify(toJS(value))
    },

render() {
        const mainStore = this.props.store!.main;
        const { languages, categories, openNavMenus } = mainStore;
        const currentItem = mainStore.group.id;

        return (
            <div>
                <menu mode="inline">
                    
                        
                        <span>ALL</span>
                    
                    
                                
                                <span>LANGUAGES</span>
                            
                        }</menu></div>

renderUnscheduledIssue() {
    const { mode, backlogExpand } = US;
    const { keyword } = this.state;
    const issues = this.getIssuesByKeyword(keyword, toJS(US.backlogIssues).filter(v => (v[`${mode}Id`] === null || v[`${mode}Id`] === 0) && v.statusCode !== 'done'));
    return (
      
        <div>
          <h4>
            {'未规划'}
          </h4>
          
        </div>
        
          {(provided, snapshot) =&gt; (

Object.keys(props).forEach(key => {
        const value = props[key];
        let result;

        if (isObservableArray(value)) {
            result = value.peek();
        } else if (isObservableMap(value)) {
            result = value.toJS();
        } else if (isBoxedObservable(value)) {
            result = value.get();
        } else if (isObservable(value)) {
            result = toJS(value);
        } else {
            result = value;
        }

        unboxedProps[key] = result;
    });

@computed get getParentId() {
    return toJS(this.parentId);
  }