ant-design / ant-design/pro-components
🐛[BUG] EditableProTable onChange is triggered with old data after onSave
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🐛 Bug description
I need to update the table datasource after I get the response from onSave method.
However, after I call my setDataSource function (also provided to EditableProTable with `onChange={setDataSource}`, the component calls the same setDataSource method with existing information and overwrites my chanes.
### 📷 Reproduction steps
- Implement EditableProTable. Provide dataSource and onChange from local state.
- Implement onSave that calls setDataSource with a value that doesn't exist on frontend yet.
- Edit the row and save
- Observe setDataSource calls
- Comment onChange out and test edit->save again and observe that the datasource is updated as expected.
### 🏞 Expected results
Data source is updated with the data from backend and it is not overwritten by the table component.
### 💻 Reproduction code
Uuid is empty on init. onSave adds it (please leave it blank for the purpose of reproduction.
Note: My case is different and uuid is just some test name.
https://codesandbox.io/p/sandbox/wizardly-currying-t7qcgk
```js
import "./styles.css";
import React, { useState } from "react";
import { Button } from "antd";
import { EditableProTable } from "@ant-design/pro-components";
export default function App() {
const [dataSource, _setDataSource] = useState([
{
id: 1,
uuid: null,
},
]);
const setDataSource = (data) => {
console.log("setDataSource was called with", data);
_setDataSource(data);
};
const columns = [
{
title: "id",
dataIndex: "id",
fieldProps: {
disabled: true,
},
},
{
title: "uuid",
dataIndex: "uuid",
},
{
title: "Actions",
align: "center",
valueType: "option",
render: (_text, record, _number, action) => (
<>
action?.startEditable?.(record.id)}
>
Edit
),
},
];
const onSave = (_rowKey, data, _row) => {
return new Promise((res, rej) => {
res([
{
id: 1,
uuid: "test",
},
]);
}).then((data) => {
setDataSource(data);
return data;
});
};
return (
Hello Bug
[dom.save],
}}
/>
);
}
```
### © Version information
- Version: "@ant-design/pro-components": "^2.7.12",
- browser environment: Arc, Chrome
- development environment: mac OS
### 🚑 Other information
I am open to built in callback function to update the data on save like promise.resolve.
Contributor guide
Research direction
Start with the supplied EditableProTable reproduction and trace the editable onSave/onChange flow. Verify that data returned by onSave is not later overwritten by the table's older data, and use the reproduction steps to confirm the backend value remains in the data source.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100