数据变化时如何在ReactJS中刷新Material-Table（Material-ui）组件
Posted
技术标签:
【中文标题】数据变化时如何在ReactJS中刷新Material-Table（Material-ui）组件【英文标题】：How to refresh Material-Table (Material-ui) component in ReactJS when data changes 【发布时间】：2020-04-03 12:18:46 【问题描述】：我在我的 ReactJS 项目中使用材料表，我检查了它的文档，但我不知道如何在数据不断变化时刷新表（比如每 500 毫秒左右）。我很感激任何信息。
下面的代码是我正在尝试使用的数据表。创建如下数据表后，我想定期更新传入 UDP 消息的行中元素的值。我将在 500 毫秒内收到一条 UDP 消息中的新值，我必须更新这些值。
import React from 'react';
import forwardRef from 'react';
import MaterialTable from 'material-table';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
const tableIcons =
Add: forwardRef((props, ref) => <AddBox ...props ref=ref />),
Check: forwardRef((props, ref) => <Check ...props ref=ref />),
Clear: forwardRef((props, ref) => <Clear ...props ref=ref />),
Delete: forwardRef((props, ref) => <DeleteOutline ...props ref=ref />),
DetailPanel: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
Edit: forwardRef((props, ref) => <Edit ...props ref=ref />),
Export: forwardRef((props, ref) => <SaveAlt ...props ref=ref />),
Filter: forwardRef((props, ref) => <FilterList ...props ref=ref />),
FirstPage: forwardRef((props, ref) => <FirstPage ...props ref=ref />),
LastPage: forwardRef((props, ref) => <LastPage ...props ref=ref />),
NextPage: forwardRef((props, ref) => <ChevronRight ...props ref=ref />),
PreviousPage: forwardRef((props, ref) => <ChevronLeft ...props ref=ref />),
ResetSearch: forwardRef((props, ref) => <Clear ...props ref=ref />),
Search: forwardRef((props, ref) => <Search ...props ref=ref />),
SortArrow: forwardRef((props, ref) => <ArrowDownward ...props ref=ref />),
ThirdStateCheck: forwardRef((props, ref) => <Remove ...props ref=ref />),
ViewColumn: forwardRef((props, ref) => <ViewColumn ...props ref=ref />)
;
export default function ElementsTable()
const [state, setState] = React.useState(
columns: [
title: 'Element Name', field: 'elmName' ,
title: 'Value', field: 'elmVal' ,
title: 'Direction', field: 'msgDirection',
lookup: 1: 'INCOMING', 2: 'OUTGOING'
,
title: 'Value Type',
field: 'valType',
lookup: 1: 'Engineering', 2: 'Raw' ,
,
],
data: [
elmName: 'Elem1', elmVal: 'STATUS_ON', msgDirection: 1, valType: 1 ,
elmName: 'Elem2', elmVal: 'STATUS_OFF', msgDirection: 2, valType: 2 ,
elmName: 'Elem2', elmVal: 'STATUS_ON', msgDirection: 1, valType: 1 ,
],
);
return (
<MaterialTable
title="Element List"
icons=tableIcons
columns=state.columns
data=state.data
editable=
onRowAdd: newData =>
new Promise(resolve =>
setTimeout(() =>
resolve();
setState(prevState =>
const data = [...prevState.data];
data.push(newData);
return ...prevState, data ;
);
, 600);
),
onRowUpdate: (newData, oldData) =>
new Promise(resolve =>
setTimeout(() =>
resolve();
if (oldData)
setState(prevState =>
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return ...prevState, data ;
);
, 600);
),
onRowDelete: oldData =>
new Promise(resolve =>
setTimeout(() =>
resolve();
setState(prevState =>
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return ...prevState, data ;
);
, 600);
),
/>
);
【问题讨论】：
请向我们展示您目前拥有的代码的相关部分。 添加了更多细节。 【参考方案1】：对于使用远程数据并希望刷新的人
import createMuiTheme from '@material-ui/core/styles';
import React, useRef from 'react';
import ReactDOM from 'react-dom';
import MaterialTable from './material-table';
const App = () =>
tableRef = useRef();
return (
<div style= maxWidth: '100%', direction >
<MaterialTable
tableRef=tableRef
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' ,
]
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,
)
);
)
title="Remote Data Example"
/>
<button
onClick=() => tableRef.current.onQueryChange()
>
ok
</button>
</div>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
如果您想刷新数据，这行小代码可以为您创造奇迹
tableRef.current.onQueryChange()
确保你也添加了tableRef = useRef();
【讨论】：
当我使用 tableRef.current.OnQueryChange() 时，它会抛出一个错误，说 _this.props.data 不是函数。【参考方案2】：您可以简单地更新您的数据对象，例如使用 useEffect 中的间隔：
useEffect(() =>
const timer = setInterval(() =>
setData(prevData => [
...prevData[0],
value: Math.round(Math.random() * 1000)
]);
, 500);
return () => clearInterval(timer);
, []);
我创建了一个sandbox 来向您展示它是如何工作的。当然，您需要更新它以适合您的数据。
【讨论】：
太好了，如果对你有帮助的话。您能否将答案标记为已接受，以便其他人可以找到它？ 对不起，我反应有点晚，我是新用户，习惯了。已标记，再次感谢。 如果我必须调用 API 来获取远程数据，此解决方案是否最佳？以上是关于数据变化时如何在ReactJS中刷新Material-Table（Material-ui）组件的主要内容，如果未能解决你的问题，请参考以下文章
如何在刷新页面上存储在本地存储中的 reactjs 中使用 JWT 进行身份验证？