如何更改props在iu表中的数据?

时间:2019-11-27 07:34:24

标签: reactjs material-ui

如果将道具直接发送到数据,则在更改道具时,将重绘表格。 尝试使用 useEffect ,没有帮助。该表显示为空。在一个简单的示例中,没有表的是字段,一切正常。

import MaterialTable from 'material-table';

import { forwardRef } from 'react';
import React, { useState, useEffect, useLayoutEffect } from 'react';

//imports

export default function MaterialTableDemo(props) {
  const [state, setState] = React.useState({
    columns: [
      { title: 'id', field: 'key'} ,
      { title: 'name', field: 'name' },
    ],
    data: props.todosArg
  });

  useEffect(() => {
    console.log('new data: ', props.todosArg);

    setState({data: props.todosArg});
  }, [props.todosArg]);


  return (
    <MaterialTable
      title="Editable Example"
      icons={tableIcons}
      columns={state.columns}
      data={state.data}
      actions={[
        {
          icon: 'delete',
          tooltip: 'Delete User',
          onClick: (event, rowData) => props.actionDelete(rowData.key)
        }
      ]}
    />
  );
}

0 个答案:

没有答案