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}
      />
    );
  }

}

更新存储状态时，我希望此Table组件重新呈现。

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}
      />
    );
  }

}

Answer 2

我相信React组件可以与Mobx一起使用，应该为该库完全重建它们。 Observer components if they are directly accessed by render。在我的问题中看起来类似的问题 Ant-Design Table not rendering when change state in mobx store

MobX如何使导入的组件可观察？

2 个答案: