- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用图书馆 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/
我正在编写一个 Web 应用程序,两个不同的用户可以在其中更新事物列表,例如待办事项列表。我已经意识到,乐观锁定机制效果最好,因为我不希望出现高争用情况。 我一直在查看事务隔离级别,现在我有点困惑。看
这个问题在这里已经有了答案: Pessimistic versus Optimistic Concurrency (Locking versus Feedback) (3 个答案) 关闭 8 年前。
我是一名优秀的程序员,十分优秀!