如何使用 material-table 实现远程数据的乐观渲染?
How can I achieve optimistic rendering with remote data using material-table?
我在我的应用程序中使用库 material-table 作为数据 table。我将数据道具设置为使用来自 this.state.data 的数据,并且添加行将通过使用 setState 在我的 table 上更新。但是在切换到远程数据后,table 在添加一行后不会更新。有没有其他方法可以使用远程数据实现此目的?
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 Table
的所有查询事件的函数
您可以创建对 table 的 React 引用。在那一刻,您可以访问该功能。
如果需要,您可以使用它直接将值传递给函数。
步骤如下:
1- 创建一个值并分配 React.createRef()
让 tableRef=React.createRef()
2- 将其分配给名为 tableRef
的 Material Table 属性
tableRef={tableRef}
3- 当您需要更新 table.
时,您可以调用函数 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 作为数据 table。我将数据道具设置为使用来自 this.state.data 的数据,并且添加行将通过使用 setState 在我的 table 上更新。但是在切换到远程数据后,table 在添加一行后不会更新。有没有其他方法可以使用远程数据实现此目的?
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 Table
的所有查询事件的函数您可以创建对 table 的 React 引用。在那一刻,您可以访问该功能。 如果需要,您可以使用它直接将值传递给函数。
步骤如下: 1- 创建一个值并分配 React.createRef() 让 tableRef=React.createRef()
2- 将其分配给名为 tableRef
的 Material Table 属性tableRef={tableRef}
3- 当您需要更新 table.
时,您可以调用函数 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) 看看你能做什么。
如果这对你有帮助,请告诉我 问候