ElemeFE / ElemeFE/element-react
Table doesn't update on data change
- Dominant language
- JavaScript
- Stars
- 2.8k
- Forks
- 435
- PR merge metrics
- No merged PRs in 30d
Description
### Description
- I am using the Table component.
- I use the `render` property in the columns.
- I pass an array of objects to the `data` prop
- When the array changes, the rows don't reflect the changes.
### Reproduce Steps
1. Code snippet
```js
(
)
}
]}
data={[
{ id: 1, name: 'foo' },
{ id: 2 },
{ id: 3, name: 'baz' }
]}
/>
// output
name
----
1
foo
----
2
N/A
----
3
baz
// change data array to:
[
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'baz' }
]
// result
name
----
1
foo
----
2
N/A
----
3
baz
// expected result:
name
----
1
foo
----
2
bar
----
3
baz
```
### Temporary solution
If the data array is an array of objects [ {...}, {...}, ... ], make sure the objects always have the same properties.
Seems like the Table component will keep the initial version of the data array, stores it internally and only reflects changes to the properties that were present in the objects at mount time.
Note: this problem only appears on first render after array changed. Subsequent renders do reflect the new properties.
Contributor guide
Assessment
This issue has not been assessed yet.