我如何重新渲染蚂蚁 Table

Question

我使用来自 ant 设计的 Table。我对如何在更新状态时重新呈现 table 数据源有疑问？我将状态添加到数据源，如：

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

在我更新我的状态之后：

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. 
  };

但它不会重新呈现 table 数据源。在我更新我的状态后，它不应该重新渲染吗？我哪里做错了？感谢回复！

Answer 1

您正在更新同一个引用，您需要渲染一个副本，否则您的组件将不会渲染。

一个基于你的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>
  );
}

我如何重新渲染蚂蚁 Table

How can i re-render ant Table

javascript

reactjs

react-native

react-redux

antd