How can i re-render ant Table

user_16884543 0
Viewed 2332

I using Table from ant desing. I have question about how can i re-render table datasource when i update the state ? I add state to dataSource like :

<Table
            rowKey="Id"
            columns={columns}
            dataSource={documents.Data}
            className="w-full"
          />

And after i update my state like :

const UpdateDocument = (row) => {
    let fakeList = { ...documents };
    let item = fakeList.Data.find((x) => x.Id === row.Id);
    let index = fakeList.Data.indexOf(item);
    fakeList.Data[index] = row;
    setDocuments(fakeList); //I update my state here. 
  };

But its not re-render table datasource. After i update my state shouldn't it re-render too ? Where do i make wrong ? Thanks for replies!

react-redux antd react-native reactjs javascript
1 Answers

You are updating the same reference, you need to render a copy or your component will not render.

A working example based on your codesandbox:

import "./styles.css";
import React, { useState } from "react";
import { Button, Table } from "antd";

const fakeData = {
  Data: [
    {
      Name: "Test 1",
      isOpen: true
    },
    {
      Name: "Test 2",
      isOpen: true
    },
    {
      Name: "Test 3",
      isOpen: true
    },
    {
      Name: "Test 4",
      isOpen: true
    }
  ]
};
export default function App() {
  const [newData, setnewData] = useState(fakeData);

  const changeState = () => {
    const fakeItem = { Name: "Fake test", isOpen: true };
    const newList = { Data: []};
    const datas = fakeData.Data.map((data) =>
      data.Name === "Test 3" ? fakeItem : data
    );
    newList.Data = datas;
    setnewData(newList);
  };
  const columns = [
    {
      title: "Name",
      dataIndex: "Name",
      key: "name"
    }
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Table rowKey="Name" columns={columns} dataSource={newData.Data} />
      <Button onClick={changeState}>Change State</Button>
    </div>
  );
}
user_74163770
Related