antd+react 数据更新后,Table组件不刷新
为什么会出现这个问题呢？如何解决这个问题？
链接:
link.
点击某条数据可开启编辑，失去焦点自动保存，实现过程看链接
https://ant.design/components/table-cn/#components-table-demo-edit-cell.
上面这张图可以看出失去焦点并没有更新视图，而下面这张图可以看出数据已经更新了
看代码
request("/sys/base-process/selectDataByPage",{
body
: JSON.stringify({
...searchObj
,
page
:searchObj
.page
,
size
:searchObj
.size
,
total
:searchObj
.total
,
materialId
:selectedKeys
[0],
routeId
:selectedTag
}),
method
: 'POST',
}).then(data
=>{
if(data
.obj
){
const searchObj
= {
page
:data
.obj
.current
,
size
:data
.obj
.size
,
total
:data
.obj
.total
,
};
this.setState({processList
:data
.obj
.records
,processSearchObj
:searchObj
});
this.forceUpdate();
console
.log(this.state
.processList
);
}else{
message
.warn(data
.msg
);
}
}).catch(err
=>{
message
.error("错误提示"+err
);
})
为什么会出现这个问题呢？
antd的Table组件有个rowKey属性，这个值如果不变是不会刷新这一样的，当刷新页面或者切换
到其他组件在切换回来才会刷新，那么我们只需要保证这个key变化就可以了
如何解决这个问题？
<Table size
='small'
className
={style
.mar_top_10
}
rowClassName
={style
["editable-row"]}
dataSource
={processList
}
pagination
={pagination
}
rowKey
={(record
) => {
return (record
.id
+ Date
.now())
}}
components
={components
}
columns
={mergeColumns
.concat(actionColumn
)}
onRow
={(record
)=>{
return {
onClick
:()=>{
if(!this.state
.isRequestId
|| this.state
.isRequestId
!= record
.id
){
this.fetchProcess(record
.id
);
}
}
}
}}
/>
