我在ReactJS项目中使用了材料表,并且检查了它的文档,但是当数据不断变化时(例如每500ms左右),我不知道如何刷新表。我感谢任何信息。
以下代码是我要使用的数据表的代码。如下创建数据表后,我想定期从传入的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);
}),
}}
/>
);
}
您可以简单地使用useEffect中的时间间隔更新数据对象:
useEffect(() => {
const timer = setInterval(() => {
setData(prevData => [
{
...prevData[0],
value: Math.round(Math.random() * 1000)
}
]);
}, 500);
return () => clearInterval(timer);
}, []);
我创建了一个沙箱来向您展示它如何工作。您需要进行更新以适合您的数据。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句