Next.js中@syncfusion日程组件数据注入错误求助

使用支持服务端渲染（SSR）的Next.js对@syncfusion/ej2-react-schedule日程组件进行法语本地化适配，改造为SSR兼容版本后，在JSX中注入JSON数据源时出现以下错误：

TypeError: Cannot read property 'data' of undefined

This error happened while generating the page. Any console logs will be displayed in the terminal window

162 | });
163 |  var predatabase = dataSource;
> 164 |  var database = {predatabase:this.data}
     |                                  ^
165 |   return (
166 |     
167 |     <Scheduler

相关代码如下：

import { render } from "react-dom";
import "./../../styles/agenda.module.css";
import * as React from "react";
import {
  ScheduleComponent,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Inject,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-react-schedule";

import { extend, loadCldr, L10n } from "@syncfusion/ej2-base";
import { SampleBase } from "./sample-base";


import * as dataSource from "../../database/agenda_datasource.json";
import * as numberingSystems from "./../agenda-culture-files/numberingSystems.json";
import * as gregorian from "../agenda-culture-files/ca-gregorian.json";
import * as numbers from "../agenda-culture-files/numbers.json";
import * as timeZoneNames from "../agenda-culture-files/timeZoneNames.json";
import dynamic from 'next/dynamic';



//Dynamically import the Smart.Scheduler component
const Scheduler = dynamic(() => import("@syncfusion/ej2-react-schedule"), {
  ssr: false, //no server-side rendering 

});

function AgendaWidget({}) {
  loadCldr(numberingSystems, gregorian, numbers, timeZoneNames);
// hoho ny tsy fahaizana ajax de atao manta be lo le traduction fa ra mazoto any aoriana de ito ny code snipet https://ej2.syncfusion.com/react/documentation/schedule/localization/
L10n.load({
  fr: {
  ////.............. json translating contents
    },
    calendar: {
      today: "Aujourd'hui,Androany"
    }
  }
});
 var predatabase = dataSource;
 var database = {predatabase:this.data}
  return (
    
    <Scheduler
    width="100%"
    height="650px"
    selectedDate={new Date(2018, 1, 15)}
    ref={t => (this.scheduleObj = t)}
//why it can't find  database variable here
    eventSettings={database}
    locale="es"
  >
    <Inject
      services={[
        Day,
        Week,
        WorkWeek,
        Month,
        Agenda,
        Resize,
        DragAndDrop
      ]}
    />
  </Scheduler>
  );
}

export default AgendaWidget;

解决方案 #

1. 修复this.data的错误 #

函数组件中不存在this对象，直接导入的dataSource是JSON模块，需根据其实际结构正确引用：

• 如果agenda_datasource.json的结构是{ "data": [...] }，则使用dataSource.data获取数组；
• 如果JSON本身就是事件数组，则直接使用dataSource。

2. 修正eventSettings的格式 #

Syncfusion日程组件的eventSettings要求传入包含data属性的对象（属性名必须为data，组件会读取该字段加载事件），而非自定义的predatabase字段。

3. 其他代码修正 #

• 动态导入的组件名与静态导入的ScheduleComponent冲突，统一使用动态导入；
• 函数组件中不能用this存储ref，改用useRef钩子；
• 本地化需将locale设为fr（法语）而非es（西班牙语）。

修正后的完整代码 #

import "./../../styles/agenda.module.css";
import * as React from "react";
import { useRef } from "react";
import {
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Inject,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-react-schedule";

import { loadCldr, L10n } from "@syncfusion/ej2-base";
import * as dataSource from "../../database/agenda_datasource.json";
import * as numberingSystems from "./../agenda-culture-files/numberingSystems.json";
import * as gregorian from "../agenda-culture-files/ca-gregorian.json";
import * as numbers from "../agenda-culture-files/numbers.json";
import * as timeZoneNames from "../agenda-culture-files/timeZoneNames.json";
import dynamic from 'next/dynamic';

// 动态导入日程组件，禁用SSR
const Scheduler = dynamic(() => import("@syncfusion/ej2-react-schedule").then(mod => mod.ScheduleComponent), {
  ssr: false,
});

function AgendaWidget() {
  const scheduleRef = useRef(null);
  
  loadCldr(numberingSystems, gregorian, numbers, timeZoneNames);
  
  // 加载法语本地化资源
  L10n.load({
    fr: {
      // 补充你的本地化内容
      calendar: {
        today: "Aujourd'hui"
      }
    }
  });

  // 根据JSON结构获取数据源，假设你的JSON是{ "data": [...] }格式
  const eventData = dataSource.data;

  return (
    <Scheduler
      width="100%"
      height="650px"
      selectedDate={new Date(2018, 1, 15)}
      ref={scheduleRef}
      eventSettings={{ data: eventData }}
      locale="fr"
    >
      <Inject
        services={[
          Day,
          Week,
          WorkWeek,
          Month,
          Agenda,
          Resize,
          DragAndDrop
        ]}
      />
    </Scheduler>
  );
}

export default AgendaWidget;

内容的提问来源于stack exchange，提问作者Aro