javascript - 在 Material-ui 的数据网格中查看时未显示复选框

问题描述

一些与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 一起使用，甚至尝试过但没有帮助这个问题在这个问题之后工作，这个问题是“我可以在 material-ui DataGrid 中初始化复选框选择吗？”

我可以在 material-ui DataGrid 中初始化复选框选择吗？

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

标签： javascriptnode.jsreactjsexpressmaterial-ui

javascript - 在 Material-ui 的数据网格中查看时未显示复选框

问题描述

解决方案

推荐阅读