在ReactJS MUI DataGrid组件中通过useState创建列使其无法使用

Question

我创建了一个 DataGrid 组件，就像 https://mui.com/x/react-data-grid/editing 中的示例一样。创建列后不使用 let 而是使用 useState 来代替，如下所示：

function browser({params}) {
    const [columns, setColumns] = useState([]);

    useEffect(() => {
        let cols = prepareColumns(selectedColumns, primaryKey);
        setColumns(cols);
    }, []);
    ...

    return (
     <DataGrid
        rows={rows}
        columns={columns}
        ...
     />
    );

我遇到了非常奇怪的错误，通过操作列上的按钮进行编辑不起作用，删除会使整行消失。我不知道发生了什么事。我需要列具有反应状态，因为我想在运行时更动态地插入一些列。

Answer 1

尝试使用 apiRef 动态更改表中的数据，而不需要重新渲染。

https://mui.com/x/react-data-grid/api-object/

function browser({params}) {
  const apiRef = useGridApiRef();

  return (
    <div>
      <Button 
          onClick={() => apiRef.current.setRows([ id: 1, name: 'John' ])}
      >
          Add row
      </Button>
      <DataGrid columns={columns} apiRef={apiRef} {...other} />
    </div>
  );
}