类型错误： apiRef.current.updateRows 不是材料 ui 数据网格中的函数

Question

我想使用 Material UI 制作一个数据网格表。用户可以在其中更新表单提交中的特定行数据。对于性能问题，我想添加来自“material-ui/data-grid”的useGridApiRef。但我面临 ap​​iRef.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 && (
              <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;

示例输出输出图像

Answer 1

似乎 apiRef prop 没有从 datagrid 启用，我不确定这是否是一个错误，因为 apiRef 类型被强制为未定义，或者是其他许可证版本的功能。对于此用例，有一个可能对您有用的技巧： 附加 apiRef