ant-design / ant-design/pro-components

🐛[BUG] EditableProTable onChange is triggered with old data after onSave

Open
#8,610 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.