如何修复this.TD[this.j5]是空的使用Flexmonster

Question

我在本地环境上工作，我使用Next类似的框架。当我进行一些修改时，当前的柔性怪物组件显示了以下错误：this.TDthis.j5是空的。

​

​

我知道Flexmonster可以在CSR (客户端呈现)上工作，我使用了一个定制的卸载钩子来等待，然后才能导出任何柔性怪物功能。

Flexmonster组件代码：

import { useRef } from 'react';
import dynamic from 'next/dynamic';
import useDebounce from '@hooks/useDebounce';
import 'flexmonster/flexmonster.css';

const DynamicFlexMonster = dynamic(() => import('react-flexmonster'), {
  ssr: false,
});

const Flexmonster = ({
  dataSource = [],
  rows = [],
  columns = [],
  measures = [],
  formats = {},
  viewType,
  gridType,
  chartType,
}) => {
  const flexmonsterDataStructure = {
    dataSource: {
      data: dataSource,
    },
    slice: {
      rows,
      columns,
      measures,
    },
    options: {
      viewType,
      grid: {
        type: gridType,
        showHeader: false,
        showTotals: false,
        showGrandTotals: 'off',
      },
      chart: {
        type: chartType,
      },
      showEmptyData: true,
    },
    formats,
  };

  const ref = useRef(null);
  const [debounceReport, setDebounceReport] = useDebounce(null);

  const onReportComplete = () => {
    setDebounceReport(ref.current, 1000);

    if (debounceReport) {
      console.log('>>>>', ref.current.flexmonster.getReport());
    }
  };

  return (
    <>
      <DynamicFlexMonster
        ref={ref}
        toolbar={false}
        width="100%"
        report={flexmonsterDataStructure}
        reportcomplete={onReportComplete}
      />
    </>
  );
};

export default Flexmonster;

Answer 1

我也面临着同样的问题，主要的问题是Flexmonster使用了window元素，所以当您使用像Nextjs这样的SSR框架时，您将需要调用all页面，在该页面中，您以SSR: false的形式显示您的Flexmonster组件。从您的代码中，您必须调用您的Flexmonster组件，如下所示：

/* pages/my-flexmonster-component-page */

import dynamic from 'next/dynamic';
const Flexmonster = dynamic(() => import('@components/Flexmonster'), {
  ssr: false,
});

export default function MyFlexmonsterComponentPage(){

return (
 <> 
  <Flexmonster/>
</>
);
}