ReactJS-无法从材质表中的动作单击处理程序的rowData获取属性

问题描述

我在React Typescript项目中使用material-table。我只是将示例代码复制到了我的项目中，但是由于某些键入问题而无法正常工作。代码是

export interface Entity {
    id:string,name:string,abc:string,xyz:string
}
  const { totalCount,entities,listLoading } = currentState;  //currentState from useSelect

//recreating the Entities to make it mutable as I'm using redux-toolkit which freezes the state and and material-table don't accept freezed state objects
  const materialTableEntities=entities?entities.map((entity:Entity) => ({...entity})):[];

  // Table columns
  const columns = [
    {
      title: "Name",field: "name"
    },{
      title: "ABC Column",field: "abc"
    },{
      title: "XYZ Column",field: "xyz"
    },];

  return (
    <>
    <MaterialTable
      title=""
      columns={columns}
      data={materialTableEntities}
      actions={[
        {
          icon: 'save',tooltip: 'Save Entity',onClick: (event,rowData) => alert("You saved " + rowData.id)  //error on rowData.id
        },{
          icon: 'delete',tooltip: 'Delete Device',rowData) => alert("You deleted " + rowData.id)   //error on rowData.id
        }
      ]}
      options={{
        search: true,actionsColumnIndex: -1
      }}

    />
</>

错误是

类型'{{id：string;名称：字符串； abc： 串; xyz：字符串； } | {...; } []'。

解决方法

通过之前的检查类型修复，例如：

if( !Array.isArray(rowData)){
   console.log(rowData.name)
}