警告：flushSync 是从生命周期方法内部调用的。当 React 已经渲染时，React 无法刷新

Question

我的控制台充斥着以下警告。不知道它是来自 ag-grid 还是来自我的代码。

Warning: flushSync was called from inside a lifecycle method. 
React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
    at RowContainerComp (http://localhost:5173/node_modules/.vite/deps/ag-grid-react.js?v=ec6922df:12931:29)
    at div
    at div
    at GridBodyComp (http://localhost:5173/node_modules/.vite/deps/ag-grid-react.js?v=ec6922df:13071:24)
    at TabGuardCompRef (http://localhost:5173/node_modules/.vite/deps/ag-grid-react.js?v=ec6922df:13291:28)
...

这是我的 React 组件。TableLayout是一个自定义组件。

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import TableLayout from "./TableLayout";
import React from "react";
import { ColDef } from "ag-grid-community";

interface IData {
  data: {
    id: number;
    name: String;
    email: String;
    org_id: String;
    status: String;
    role: String;
  }[];
}

interface TeamTableProps {
  data: IData[];
  loading: boolean;
}
const TeamTable: React.FC<TeamTableProps> = ({ data, loading }) => {
  const gridRef = useRef<AgGridReact<IData>>(null);
  const [columnDefs] = useState<ColDef[]>([
    {
      field: "name",
      headerName: "Name",
    },
    {
      field: "email",
      headerName: "Email",
    },
    {
      field: "role",
      headerName: "Role",
    {
      field: "status",
      headerName: "Status",
    },
  ]);

  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      sortable: true,
      suppressAndOrCondition: true,
      resizable: true,
      cellClass: "grid-cell-centered",
    };
  }, []);

  const onFilterChanged = () => {
    gridRef.current?.api?.getFilterModel();
  };
  const onBtnExport = useCallback(() => {
    gridRef.current?.api?.exportDataAsCsv();
  }, []);

  useEffect(() => {
    if (gridRef.current && gridRef.current.api) {
      if (loading) {
        gridRef.current.api.showLoadingOverlay();
      } else {
        gridRef.current.api.hideOverlay();
      }
    }
  }, [loading]);

  return (
    <>
      <TableLayout onBtnExport={onBtnExport}>
        <AgGridReact
          rowData={data}
          gridOptions={{
            enableCellTextSelection: true,
            overlayLoadingTemplate:
              '<span class="ag-overlay-loading-center">Loading...</span>',
            domLayout: "autoHeight",
            suppressDragLeaveHidesColumns: true,
            pagination: true,
            paginationPageSize: 50,
            rowHeight: 50,
          }}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          onFilterChanged={onFilterChanged}
          ref={gridRef}
        />
      </TableLayout>
    </>
  );
};

export default TeamTable;

Answer 1

您在代码中没有使用flushSync，因此它来自库