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

关键词：

【中文标题】在 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] 这样的道具。但它也会为每一行添加复选框。

【讨论】：

Mobx 仅在计算值更改时重新渲染项目

】Mobx仅在计算值更改时重新渲染项目【英文标题】：Mobxonlyre-renderitemwhencomputedvaluechanges【发布时间】：2021-12-1908:55:30【问题描述】：我有一个媒体列表，我的目标是能够显示当前正在播放的媒体。为此，我将播放媒体ID与列表中... 查看详情

商店状态更改时反应组件不更新

】商店状态更改时反应组件不更新【英文标题】：Reactcomponentnotupdatingwhenstorestatehaschanged【发布时间】：2016-06-2508:09:39【问题描述】：下面是我的组件类。该组件似乎永远不会执行componentWillUpdate()，即使我可以在mapStateToProps返回... 查看详情

状态更改时订阅陷入无限循环

...布时间】：2018-09-0201:19:36【问题描述】：有人知道如何在商店订阅内向商店发送操作时解决无限循环吗？为了避免循环，我不得不在store中添加一个条件，但我想知道是否有更优雅的方式让它工作。无限循环代码：ngOnInit():voidthis... 查看详情

如何更改路由器在Vue中状态更改时呈现的组件？

...：2021-04-1118:36:06【问题描述】：我在Vue中设置了一个Vuex商店和路由器。根据此存储中的某个状态，我希望路由器为同一路径呈现不同的组件。以下是我的尝试。在我的路由器中，我包含一个条件，即“如果用户已登录，则返回Ho... 查看详情

在商店和存档页面中选择变量时如何更改产品图片？

】在商店和存档页面中选择变量时如何更改产品图片？【英文标题】：HowtochangeproductImagewhenvariablesareselectedinShopandArchivePages?【发布时间】：2021-12-2414:31:57【问题描述】：我使用这个钩子在商店页面上显示变体。但是，选择变量时... 查看详情

MobX 中的 Ajax 调用：MobX 观察者：商店不可用！确保它是由某个 Provider 提供的

】MobX中的Ajax调用：MobX观察者：商店不可用！确保它是由某个Provider提供的【英文标题】：AjaxcallinMobX:MobXobserver:Storeisnotavailable!MakesureitisprovidedbysomeProvider【发布时间】：2017-10-0718:28:03【问题描述】：我正在从具有树结构的传统Rea... 查看详情

Extjs：加载商店时更改参数值

】Extjs：加载商店时更改参数值【英文标题】：Extjs:changeparamsvaluewhileloadingstore【发布时间】：2015-05-2606:30:11【问题描述】：我有一个商店，我需要用不同的参数值多次调用它。参数值在一个数组中，我需要按数组顺序调用存储。... 查看详情

用户可以更改 Chrome 中 Redux/Mobx 的值以访问受限视图吗？

】用户可以更改Chrome中Redux/Mobx的值以访问受限视图吗？【英文标题】：CanauserchangethevalueofRedux/MobxinChrometogainaccesstorestrictedviews?【发布时间】：2020-09-1315:44:50【问题描述】：我有一个react+firebase应用程序。在用户的集合中，我有一... 查看详情

mobx基本概念

mobx是一个简单可扩展的状态管理库，主要用来管理状态之间的依赖关系，可以使用在任何状态管理的场景，并不仅限于react。结合mobx-react可以用在react中，结合mobx-vue可以用在vue中。mobx的概念与knockout和rxjs中的概念极其相似，相... 查看详情

setState() 是不是可用于更新 Alt.js 商店中的状态？

】setState()是不是可用于更新Alt.js商店中的状态？【英文标题】：IssetState()optionalforupdatingthestateinAlt.jsstore?setState()是否可用于更新Alt.js商店中的状态？【发布时间】：2017-04-2213:36:58【问题描述】：是的，我知道setState()会更新Store... 查看详情

react项目中使用mobx状态管理(代码片段)

并上一节使用的是普通的数据状态管理，不过官方推荐使用装饰器模式，而在默认的react项目中是不支持装饰器的，需要手动启用。官方参考 一、添加配置官方提供了四种方法, 方法一、使用TypeScript，顾名思义该方法是... 查看详情

还原 redux 存储中的更改

...有一个简单的问题。现在在我的AppRedux中，我有一个组合商店，当我获取数据时，它被设置为状态的一部分。然后，我有一个通过Redux管理状态的React编辑器。当用户单击编辑时，所有字段都变为可编辑的。他可以乱七八糟，然后... 查看详情

mobx对修饰器的实验支持功能在将来的版本中可能更改。在“tsconfig“或“jsconfig“中设置“experimentaldecorators“选项以删除此警告

...示  对修饰器的实验支持功能在将来的版本中可能更改。在“tsconfig“或“jsconfig“中设置“experimentalDecorators“选项以删除此警告设置一下vscode配置就行。window系统:1.vscode左下角齿轮设置=>设置​2.搜索 experimentalDecora... 查看详情

使用模拟商店时如何在ngxs中模拟@Select

】使用模拟商店时如何在ngxs中模拟@Select【英文标题】：Howtomock@Selectinngxswhenusingamockstore【发布时间】：2018-12-0711:36:58【问题描述】：我正在使用ngxs进行角度状态处理，并且我正在尝试将我们的组件作为单元进行测试，因此最好... 查看详情

无法在颤振中使用构建运行器生成 mobx

...：2020-12-0506:46:38【问题描述】：我正在使用mobxflutter进行状态管理。但在项目中添加mobx后，我无法构建生成的文件。并得到错误Badstate:Unexpecteddiagnostics:C:\\flutter\\bin\\cache\\dart 查看详情

Redux 商店使用 nextJS 自行重置路由更改

】Redux商店使用nextJS自行重置路由更改【英文标题】：ReduxstoreresetonroutechangeonhisownwithnextJS【发布时间】：2020-06-0902:29:54【问题描述】：您好，我在使用Redux和NextJS时遇到问题，当我使用API登录我的应用程序时，我的用户信息完美... 查看详情

从我的 vuex 商店更新我的渲染模板中的数据

】从我的vuex商店更新我的渲染模板中的数据【英文标题】：updatedatainmyrenderedtemplatefrommyvuexstore【发布时间】：2018-10-0714:49:13【问题描述】：我正在使用vue、vuetify和vuex做一个简单的粗加工。但是我在更新我的模板中已经呈现的数... 查看详情

mobx'this'在setter动作中未定义(代码片段)

...用lambda函数来确保上下文正确：setUsers:action.bound任何一种更改都将确保setter函数的上下文正确，并且可以使用类setUsers=value=& 查看详情