Сетка пользовательского интерфейса материала Без строки с идентификатором #не определено

#javascript #material-ui #preact

Вопрос:

Не уверен, что я здесь делаю не так, я пробую сетку данных из материала, скопировал вставленный пример кода с их веб-сайта:

 const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID', width: 90 },
    {
      field: 'firstName',
      headerName: 'First name',
      width: 150,
      editable: true,
    },
    {
      field: 'lastName',
      headerName: 'Last name',
      width: 150,
      editable: true,
    },
    {
      field: 'age',
      headerName: 'Age',
      type: 'number',
      width: 110,
      editable: true,
    }
  ];
  
  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ];

const NFTSalesGrid: FunctionalComponent = () => {
    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid 
                rows={rows}
                columns={columns}
                pageSize={10}
                rowsPerPageOptions={[5]}
            />
        </div>
    )
}

export default NFTSalesGrid;
 

И я получаю эту ошибку:

Произошла непредвиденная ошибка. Ошибка: Не найдена строка с идентификатором #неопределенный. Ошибка: Не найдена строка с идентификатором #неопределенный

Комментарии:

1. Я попробовал ваш код и удалил : GridColDef[] и : функциональный компонент. Кажется, все работает нормально.