在 mobx 商店中更改状态时，Ant-Design Table 不呈现答案

【问题标题】：Ant-Design Table not rendering when change state in mobx store在 mobx 商店中更改状态时，Ant-Design Table 不呈现
【发布时间】：2020-09-27 09:29:31
【问题描述】：

我对 ant design Table 组件中单击一行的行为进行了编程。这应该会更改表格上的 rowClassName。 Here is an example on CodeSendBox。当您单击表格行时，Store.selectedRowKey 中的值会发生变化，但表格不会重新呈现。如果将分割滑块移动到沙箱并且表格大小发生变化，则会进行渲染并应用新的行选择

这是另一个例子，mobx 不支持 ant-design Table

Ant Design Table with Modal form CRUD

我是 Mobx 的新手我真的很想了解我做错了什么

【问题讨论】：

要重新渲染 ant 设计表，我使用这里解释的钩子：stackoverflow.com/questions/46240647/…

标签： reactjs antd mobx

【解决方案1】：

要重新渲染 Ant-Design 表，您必须将数据源值作为可观察值的克隆传递。

你必须改变

<Table
    columns={columns}
    dataSource={values}
/>

转至以下代码：

<Table
    columns={columns}
    dataSource={[...values]}
/>

【讨论】：

@Nechama 你能解释一下为什么会这样吗？
在性能方面似乎效率低下，但这也是它对我有用的唯一方法

【解决方案2】：

基本上你不会在你的观察者组件中使用selectedRowKey，所以这就是它在改变时不会重新渲染的原因。

您将回调函数传递给Table，但Table 不是观察者。

我不确定是否可以在antd 中使其成为观察者，但您还能做什么：

1) 只需在渲染中某处使用selectedRowKey。就像console.log 一样，然后单击行时您的整个组件将重新呈现（包括表格）。

或者更好的方法，将它与data 行混合，例如为内部渲染的每个数据添加isSelected 键并更改rowClassName 以使用此标志：

dataSource={data.map(item => ({...item, isSelected: this.props.Store.selectedRowKey === item.key}))}
rowClassName={x => x.isSelected ? 'test-table-row-selected' : ''}

2) 使用 antd rowSelection 像 rowSelection={{selectedRowKeys: [selectedRowKey]}} 这样的道具。但它也会为每一行添加复选框。

【讨论】：