gpt4 book ai didi

material-table - 如何使用 Material 表实现远程数据的乐观渲染?

转载 作者:行者123 更新时间:2023-12-05 09:13:40 31 4
gpt4 key购买 nike

我正在使用图书馆 material-table对于我的应用程序中的数据表。我将数据 Prop 设置为使用来自 this.state.data 的数据,并且添加行将通过使用 setState 在我的表上更新。但是在切换到远程数据后,表在添加行后不会更新。是否有另一种方法可以使用远程数据实现此目的?

import React, {Component} from "react";
import MaterialTable from "material-table";
import Add from "@material-ui/icons/Add";
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
import Edit from "@material-ui/icons/Edit";
import FirstPage from "@material-ui/icons/FirstPage";
import ChevronRight from "@material-ui/icons/ChevronRight";
import LastPage from "@material-ui/icons/LastPage";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import Search from "@material-ui/icons/Search";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
state = {
data: []
}
render() {
return (
<MaterialTable
columns={[
{
title: "Avatar",
field: "avatar",
render: rowData => (
<img
style={{ height: 36, borderRadius: "50%" }}
src={rowData.avatar}
/>
)
},
{ title: "Id", field: "id" },
{ title: "First Name", field: "first_name" },
{ title: "Last Name", field: "last_name" }
]}
icons={{
Add: () => <Add />,
Check: () => <Check />,
Clear: () => <Clear />,
Edit: () => <Edit />,
FirstPage: () => <FirstPage />,
NextPage: () => <ChevronRight />,
LastPage: () => <LastPage />,
PreviousPage: () => <ChevronLeft />,
ResetSearch: () => <Clear />,
Search: () => <Search />
}}

// If this is an array from state(ie. this.state.data) then it works.
data={query =>
new Promise((resolve, reject) => {
let url = "https://reqres.in/api/users?";
url += "per_page=" + query.pageSize;
url += "&page=" + (query.page + 1);
fetch(url)
.then(response => response.json())
.then(result => {
resolve({
data: result.data,
page: result.page - 1,
totalCount: result.total
});
});
})
}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
setTimeout(() => {
{
const data = this.state.data;
data.push(newData);
this.setState({ data }, () => resolve());
}
resolve();
}, 1000);
})
}}
title="Remote Data Example"
/>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

最佳答案

有一个解决方案调用管理所有 Material 表查询事件的函数

您可以创建对表的 React 引用。在那一刻,您可以访问该功能。如果需要,您可以使用它直接将值传递给函数。

步骤如下:1- 创建一个值并赋值 React.createRef()让 tableRef=React.createRef()

2- 将其分配给名为 tableRef 的 Material 表属性

tableRef={tableRef}

3- 然后,当您需要更新表格时,您可以不带任何参数调用函数 onQueryChange()。

tableRef.current.onQueryChange()

例如:

`async apiDelete(IDs) {
try {
await Service.delete(IDs);
this.state.tableRef.current.onQueryChange();
} catch (e) {
console.log("Error Deleting" + e);
}

}`

您可以做其他事情,例如:
this.state.tableRef.current.onQueryChange({filters: "value"});

请创建一个 console.log(tableRef) 以查看您可以做的所有事情。

如果对你有帮助请告诉我问候

关于material-table - 如何使用 Material 表实现远程数据的乐观渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55752163/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com