Antd Table dataSource 变了为啥不更新？崩溃

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1764 天前的主题，其中的信息可能已经有所发展或是发生改变。

目前使用 Antd 的 Table，dataSource 使用 connect Dva 的 model state 某一个数据项。目前有个需求就是，可以修改行 /添加行。然后我的实现就是，使用 reducer，更新 state 中的数据项。问题是，model state 里面确实是更新了，但是 Table 组件不会重新渲染？
之前有过类似的功能，但是 Table 的每一行修改 /添加都会走请求，也就是用 effect 去更新 state （但最后都是 reducer 更新 state 不是吗）。为啥现在就 Table 就不能重新渲染了 TAT 。
其实想要的需求就是，用户可以先填写这些 Table 的内容，最后统一 post 。
各位大佬帮帮菜鸡。
有不清楚的地方，请让我补充。

table

State

更新

antd

9 条回复 2021-03-01 09:50:18 +08:00

palmers

2021-02-27 22:25:24 +08:00

我觉得你是直接使用了 props 里的 data 你要不试试使用 state 的 data 然后请求后存入 state 里这样用户添加修改后随便变更 state

AslanFong

2021-02-27 22:45:37 +08:00

```
component.tsx

export const NewPlan:FC<NewPlanProps> = (props) => {
const {
dispatch,
editingTemplate,
} = props;

const handleSubmit = (values: tableRow) => {
dispatch model reducer -> setTemplateItem
}

return (
<table
dataSource={editingTemplate}
/>
)
}

const mapStateToProps = (state) => {
const editingTemplate = state['probations'].editingTemplate;
return {
editingTemplate,
}
}

export default connect(mapStateToProps) (NewPlan);
```

```
model.ts

namespace: 'probations'

state: {
editingTemplate: []
}

effects:{**}

reducers: {
setTemplateItem(state, payload:item) {
****logic create newTemplete
return {
...state,
editingTemplate: newTemplate
}
```

代码 like
@palmers 我使用的是 model state 中的数据，但是这里更新是没有请求的，只是用 reducer 直接更新 state 。
之前都从 effect 再到 reducer 更新 state 的。

Augi

2021-02-28 00:26:11 +08:00 via iPhone

不可变选择，推测你更新数组或对象内部的数据没有遵循这一原则，你的 newTemplate 还是上一个引用

AslanFong

2021-02-28 08:30:35 +08:00

@Augi 你的意思是说 model 的 reducer 里面写错了？可是我检查了，和之前的一样

Augi

2021-02-28 10:39:26 +08:00 via iPhone

@AslanFong 你不是增加了增加或者删除一项的操作么，这个操作要重新生成一个数组例如使用 filter 或者 concat 方法，而不是在原有的数组上直接操作。

Augi

2021-02-28 10:40:30 +08:00 via iPhone

建议看下 react immutable 是什么意思

AslanFong

2021-02-28 18:02:18 +08:00

@Augi 感谢大佬，就是这个问题！

AslanFong

2021-02-28 18:03:19 +08:00

解决了！深拷贝浅拷贝的问题。菜哭我了。

azcvcza

2021-03-01 09:50:18 +08:00

给一个新的数组，但是计算的 key 保持原来的