CODEWITHSUNDEEP
reactjsantd
pioupiou
pioupiou

Reputation: 946

Table don't change after state change

I have antd table, I am to try to update only a subtable to add one row after api return.

If subtable is empty the row it shows on the table, if subtable have one row and more table subtable don't change. The problem is with expandedRowRender if i click for sorting the new data it shows there

But i cannot make a table to add the new row. When i print the new state for data its ok, i can see the new row there, but the table is the same. Any ideas ? i am not sure if the problem is the setState or something else i am doing wrong.

for (const property in dataGroup) {
  if (dataGroup[property].id === new.group_id) {
    dataGroup[property].group.push({
      id: user.id,
      name: user.name,
    });
    break;
  }
}
this.setState({
  data: [...dataGroup],
});
console.log(this.state.data);

-------------------------
return (
  <Table
    columns={columns}
    rowSelection={rowSelection}
    rowKey={(record) => record.id}
    expandable={{ expandedRowRender }}
    dataSource={data}
  />
........

Table json

[
  {
    "id": 97,
    "name": "f",
    "description": "",
    "group": [
      {
        "id": 90,
        "name": "fds",
      },
      {
        "id": 91,
        "name": "dsa",
      },
    ]
  },
  {
    "id": 98,
    "name": "fddf",
    "description": "",
    "group": [
      {
        "id": 96,
        "name": "fddd",
      },
    ]
  }
]

Upvotes: 0

Views: 748

Answers (1)

jeremy302
jeremy302

Reputation: 828

First of all, never use setState inside a loop or multiple times inside the same execution path because it is useless and restricts performance. call it at the end of your function execution.

The reason your state is not changing is because react thinks your state.data variable hasn't changed since it maintains the same reference. You need to use the spread operator to recreate the same object with a different reference.

for (const property in data) {
    if (data[property].id === new.group_id) {
        data[property].group.push({
            id: user.id,
            name: user.name,
        });

        break;
    }
    
}
this.setState({
    data: { ...data },
});
console.log(this.state.data);

Also make sure to set the key prop for your component arrays

Upvotes: 1

Related Questions