有什么方法可以在反应mui中将计时器放入数据网格中

Question

我正在尝试设置一个计时器。该行从存储中获取时间戳并进行减法。数据动态填充。

我正在使用 React MUI (Datagrid)，但我搞不懂。

我可以在控制台上看到正确的值，但数据网格什么也没显示。

我得到的：

function loopT(params) {
  let id = params.row.id;
  let impact = params.row.impact; => Timestamp of the impact
  clearTimeout(id);
  id = setInterval(function () {
    const currentDate = new Date();
    let seconds = Math.floor(currentDate.getTime() / 1000) - impact;

    console.log("The time was: ",seconds)

    return seconds;
  }, 1000);
}

const columns = [
  {
    field: 'id',
    headerName: 'id',
    width: 100,
  },
  {
    field: 'lastname',
    headerName: 'lastname',
    width: 100,
  },
  {
    field: 'name',
    headerName: 'name',
    width: 100,
  },
  {
    field: 'impact',
    headerName: 'impact',
    sortable: false,
    width: 100,
    valueGetter: loopT,
  },
];

export default function PanelMonitor() {
  const [realtime, setRealtime] = useState([]);
  const opera_realtime = useSelector(operaRealtime)

  useEffect(() => {
    setRealtime(opera_realtime)
  }, [opera_realtime]);

  return (
    <div style={{ height: 400, width: '100%' }}>
        <DataGrid
            rows={realtime}
            columns={columns}
            rowHeight={38}
            disableSelectionOnClick
        />
    </div>
  );
}

小米主机：

The time was:  13907
The time was:  13908
The time was:  13909
The time was:  13910
The time was:  13911

结果：

id	lastname	name	impact
1	Doe	John

没有错误。

提前致谢。

Answer 1

使用 renderCell 方法

{
    field: 'impact',
    headerName: 'impact',
    sortable: false,
    width: 100,
    renderCell: (params) => {
     let timer = loopT(params.row) // you can console params to see what you want to send in this function
     return (<p>{timer}</p>);
  },

有什么方法可以在反应mui中将计时器放入数据网格中

Is there any way to put a timer into a datagrid in react mui

datagrid

intervals

reactjs

material-ui