MobX, как сделать импортируемый компонент наблюдаемым?

Question

В моем коде я использую внешнюю библиотеку для рендеринга таблицы, которая называется antd. Я хочу повторно отобразить этот импортированный компонент, когда состояние моего хранилища изменяется, но я не могу сделать этот компонент видимым, поскольку он является импортированным компонентом, и он использует данные, переданные как реквизиты.

Он работал только тогда, когда я также отображал это хранилищеданные в главном компоненте, поэтому он запускает рендеринг и этого дочернего импортированного компонента. Но я не хочу возвращать эти данные в главном компоненте, я хочу вернуть их только в таблицу.

import React from 'react';
import { Table } from 'antd';

@inject('meetingsStore')
@observer
export default class MeetingNotes extends React.Component {

 render() {
    const meetingsStore = this.props.meetingsStore;
    const { agendaPoints } = meetingsStore.getCurrentMeeting();

    return (
      <Table
        rowKey="id"
        columns={columns}
        dataSource={agendaPoints}
        pagination={false}
      />
    );
  }

}

Когда я обновляю состояние хранилища, я хочу, чтобы этот компонент таблицы повторно отображался.

Answer 1

Мне удалось исправить это с помощью mobx toJS

Вот пример рабочего кода, если кто-то столкнется с подобной проблемой.

import React from 'react';
import { Table } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

@inject('meetingsStore')
@observer
export default class MeetingNotes extends React.Component {

 render() {
    const meetingsStore = this.props.meetingsStore;
    const { agendaPoints } = meetingsStore.getCurrentMeeting();

    return (
      <Table
        rowKey="id"
        columns={columns}
        dataSource={toJS(agendaPoints)}
        pagination={false}
      />
    );
  }

}