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

Posted 2023-02-22

【中文标题】在 mobx 商店中更改状态时，Ant-Design Table 不呈现

【英文标题】：Ant-Design Table not rendering when change state in mobx store

【发布时间】：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 设计表，我使用这里解释的钩子：***.com/questions/46240647/…

【参考方案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] 这样的道具。但它也会为每一行添加复选框。