material-ui的datagrid中的查看时未显示复选框

如何解决material-ui的datagrid中的查看时未显示复选框

一些与datagrid相关的主要代码

  const apiRef = React.useRef(null);
  const [gotApiRef,setGotApiRef] = useState(false);
  const [gotApiRef2,setGotApiRef2] = useState(false);
  console.log("apiRef.current: ",apiRef.current);
  const ObjRef = React.useRef({
    dataRe: {
      columns: [],rows: [],},tempRe: {
      rows: [],});

const columns = [
    { field: "lenderName",headerName: "Lender Name",width: 200 },{ field: "endpoint",headerName: "Endpoint",width: 250 },];

// filling row data with props

useEffect(() => {
    if (props.data.docs) {
      props.data.docs.map((row) => {
        let temp = {
          id: row._id,lenderName: row.name,endpoint: row.endpoint,};
        ObjRef.current.tempRe.rows.push(temp);
      });
      console.log("2. ObjRef.current.tempRe.rows:",ObjRef.current.tempRe.rows);
    }
  },[props.data]);


// ====================== CheckBox Selection useEffect =========================
useEffect(() => {
    if (gotApiRef) {
      console.log("entry in useEffect");
      //console.log("1. ObjRef.current.dataRe: ",ObjRef.current.dataRe);
      console.log("In useEffect apiRef.current: ",apiRef.current);
      const dataRe = {
        columns,rows: ObjRef.current.tempRe.rows,};
      counterRef.current.renderCount += 1;
      // console.log(
      //   "3 counterRef.current.renderCount:",//   counterRef.current.renderCount
      // );

      ObjRef.current.dataRe = dataRe;

      const rowModels = apiRef?.current?.getRowModels();
      if (rowModels != undefined) {
        console.log("5 ObjRef.current.dataRe:",ObjRef.current.dataRe);
        console.log("in rowModel not undefined..");
        console.log("5. rowModels*:",rowModels);
        if (apiRef.current) {
          console.log("in apiRef.current*",apiRef.current);
          setGotApiRef2(true)
          apiRef.current.setRowModels(
            rowModels.map((r) => {
              console.log("in rowModels.map");
              r.selected = true;
              return r;
            })
          );
        }
      }
    }
  },[gotApiRef]);


//in return

            <DataGrid
              rows={ObjRef.current.dataRe.rows}
              columns={ObjRef.current.dataRe.columns}
              // {...ObjRef.current.dataRe}
              checkBoxSelection
              onSelectionChange={(newSelection) => {
                setSelection(newSelection.rows);
              }}
              components={{
                norowsOverlay: (params) => {
                  console.log(
                    "in norowOverlay ObjRef.current.dataRe:",ObjRef.current.dataRe
                  );
                  console.log("params in norowsOverlay**:",params);
                  if (!apiRef.current) {
                    apiRef.current = params.api.current;
                    console.log(
                      "apiRef.current in norowOverlay:",apiRef.current
                    );
                    setGotApiRef(true);
                  }
                  return <div>No rows</div>;
                },}}
            />

我在某处读到了使用Layout Effect与Use Ref一起使用的方法，甚至尝试过但没有帮助 这个问题是这个名字之后这个问题之后的工作 “我可以在用户界面的DataGrid中初始化复选框选择吗？”

Can I initialize the checkbox selection in a material-ui DataGrid?

我正在apiRef.current中获取数据 我正在ObjRef.current.dataRe中设置数据 设置后，我应该在rowModels中获取数据，但是我将rowModels作为null

解决方法

此问题已解决，我只是使用了布尔状态来渲染组件并从useEffect中删除了依赖项。 经过一番尝试后，它开始运行。