javascript - 我怎样才能重新渲染 Ant 表

Question

我使用 ant desing 中的表。我对更新状态时如何重新呈现表数据源有疑问？我将状态添加到数据源，如:

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

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

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