ElemeFE / ElemeFE/element-react

Table doesn't update on data change

Open
#938 1 comment 0 reactions 1 assignee Claimed by @loadchange View on GitHub
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
(


{elem.id}

{elem.name ? elem.name : 'N/A'}


)
}
]}
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.