Блог

Я хочу создать таблицу таблицы данных с использованием пользовательского интерфейса Material. Где пользователь может обновить определенные данные строки из отправки формы. Для проблемы производительности я хочу добавить useGridApiRef, который происходит из «material-ui/data-grid». но я столкнулся с тем, что apiRef.current.updateRows не является функцией этого prblm. Вот мой код:

   import { rows, columns } from "./helperData.js";
  import { DataGrid, useGridApiRef } from "@material-ui/data-grid";
    const DataGridPractice = () => {
      const [data, setData] = useState(rows)
      const [currentRow, setCurrentRow] = useState(null);
      const [showDialog, setShowDialog] = useState(false);
      const [isSending, setIsSending] = useState(false)
      const apiRef = useGridApiRef()
      const handleChange = e => {
        setCurrentRow({...currentRow, [e.target.name]: e.target.value})
      }
      const updateRow = () => {
        //  const updateRows = data.map((item) => item.id === currentRow.id ? currentRow : item)
        //  setData(updateRows)
       apiRef.current.updateRows([currentRow])
        
         setShowDialog(false)
      }
      
    
     
      return (
        <>
          <Container>
            {currentRow amp;amp; (
              <Dialog
                open={showDialog}
                TransitionComponent={Transition}
                keepMounted
              >
                <DialogTitle>Update data table</DialogTitle>
                <DialogContent>
                  <CustomeTextField
                    variant="standard"
                    margin="normal"
                    label="First Name"
                    name="firstName"
                    value={currentRow.firstName}
                    onChange={handleChange}
                  />
                  <CustomeTextField
                    variant="standard"
                    margin="normal"
                    label="Last Name"
                    name="LastName"
                    value={currentRow.lastName}
                    onChange={handleChange}
                  />
                  <CustomeTextField
                    variant="standard"
                    margin="normal"
                    label="Emal Address"
                    name="email"
                    value={currentRow.email}
                    onChange={handleChange}
                  />
                </DialogContent>
                <DialogActions>
                  <CustomeButton color="primary" variant="outlined" onClick={updateRow}>Update</CustomeButton>
                  <CustomeButton
                  color="secondary"
                    variant="outlined"
                    onClick={() => setShowDialog(false)}
                  >
                    Cencel
                  </CustomeButton>
                </DialogActions>
              </Dialog>
            )}
            <CustomeButton
            color="primary"
              variant="contained"
              disabled={!currentRow}
              onClick={() => setShowDialog(true)}
            >
              EDIT
            </CustomeButton>
            <Paper component={Box} width={1} height={600}>
              <DataGrid
                onRowSelected={(item) => setCurrentRow(item.data)}
                rows={data}
                columns={columns}
                pageSize={10}
                apiRef={apiRef}
                
              />
            </Paper>
          </Container>
        </>
      );
    };
    
    export default DataGridPractice;

 

пример вывода ВЫВОД-ИЗОБРАЖЕНИЕ

похоже, что поддержка apiRef не включена в datagrid, я не уверен, является ли это ошибкой, потому что тип apiRef принудительно определен как неопределенный, или функция по версии другой лицензии. Для этого случая использования есть хак, который может быть вам полезен: Прикрепление apiRef