如何重新渲染ant表

Question

我使用表从ant设计。我有关于如何我可以重新渲染表数据源时，我更新状态的问题?我将状态添加到数据源，如:

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