Reactjs 在syncfusion'中，从未分组数据状态切换到分组数据状态或从分组数据状态切换到分组数据状态时出错；s计划（react）

我们正在使用ScheduleComponent（react包装器），需要在分组数据状态和未分组数据状态之间切换

以下是标记的外观：

<ScheduleComponent
  width="100%"
  height="calc(100% - 60px)"
  currentView="TimelineWeek"
  selectedDate={state.selectedDate}
  eventSettings={state.eventSettings}
  group={state.group}
>
  <ViewsDirective>
    <ViewDirective option="TimelineDay" />
    <ViewDirective option="TimelineWeek" />
    <ViewDirective option="TimelineMonth" />
  </ViewsDirective>
  <Inject services={[TimelineViews, TimelineMonth]} />
  {resourcesDirective && resourcesDirective.length ? (
    <ResourcesDirective>
      {resourcesDirective.map(rd => (
        <ResourceDirective
          key={rd.field}
          field={rd.field}
          title={rd.title}
          name={rd.name}
          dataSource={rd.dataSource}
          textField={rd.textField}
          idField={rd.idField}
          colorField={rd.colorField}
        />
      ))}
    </ResourcesDirective>
  ) : (
    ""
  )}
</ScheduleComponent>;

2-分组数据状态：

{
    "selectedDate": "2020-02-12T23:00:00.000Z",
    "eventSettings": {
        "fields": {
            "id": "id",
            "subject": {
                "name": "4b0c5bdf-41b0-4478-990c-41d06b9941ae"
            },
            "startTime": {
                "name": "c8f10b79-a557-4e28-bb91-bc3f6428bfe0"
            },
            "endTime": {
                "name": "72cd7bde-a6d4-4877-a5c5-9d3e947a39d9"
            },
            "92b16d99-21fe-402c-ba3b-61d4fb5d9dfc": {
                "name": "92b16d99-21fe-402c-ba3b-61d4fb5d9dfc"
            }
        },
        "dataSource": [{
            "id": "2f9a08d1-58aa-11ea-9e9a-0b771aade197",
            "4b0c5bdf-41b0-4478-990c-41d06b9941ae": "task044",
            "b65757c2-d4c1-404c-8e42-f9377bfc18fc": "91ef822c-3d7e-4071-805a-3613aa2b4f87",
            "978c8dfc-ee35-48d4-9e60-41691c367ced": "{\"startDate\":\"2020-02-13T23:00:00.000Z\",\"endDate\":\"2020-02-13T23:00:00.000Z\"}",
            "92b16d99-21fe-402c-ba3b-61d4fb5d9dfc": "id-ew9j",
            "38e1b256-aeb8-4fd7-a4db-337c1dda0605": 44,
            "372a6ad4-4f97-43a6-90f5-d5494241ba03": null,
            "c8f10b79-a557-4e28-bb91-bc3f6428bfe0": "2020-02-12T23:00:00.000Z",
            "72cd7bde-a6d4-4877-a5c5-9d3e947a39d9": "2020-03-17T23:00:00.000Z"
        }, {
            "id": "7b689441-57e5-11ea-b2fd-1568322e886b",
            "4b0c5bdf-41b0-4478-990c-41d06b9941ae": "tassk03",
            "b65757c2-d4c1-404c-8e42-f9377bfc18fc": "ebda8884-cbc5-4030-a54d-34a2df32b701",
            "978c8dfc-ee35-48d4-9e60-41691c367ced": null,
            "92b16d99-21fe-402c-ba3b-61d4fb5d9dfc": "id-aoab",
            "38e1b256-aeb8-4fd7-a4db-337c1dda0605": 95,
            "372a6ad4-4f97-43a6-90f5-d5494241ba03": null,
            "c8f10b79-a557-4e28-bb91-bc3f6428bfe0": "2020-02-25T23:00:00.000Z",
            "72cd7bde-a6d4-4877-a5c5-9d3e947a39d9": "2020-06-18T23:00:00.000Z"
        },...]
    },
    "group": {
        "resources": ["92b16d99-21fe-402c-ba3b-61d4fb5d9dfc"]
    },
    "ResourcesDirective": [{
        "field": "92b16d99-21fe-402c-ba3b-61d4fb5d9dfc",
        "title": "Tag-field",
        "name": "92b16d99-21fe-402c-ba3b-61d4fb5d9dfc",
        "dataSource": [{
            "content": "option1",
            "cellClass": "color1",
            "rippleColor": "#72C045",
            "id": "id-keho",
            "tagIndex": 0
        }, {
            "content": "option2",
            "cellClass": "color2",
            "rippleColor": "#F1921F",
            "id": "id-ew9j",
            "tagIndex": 1
        }, {
            "content": "option3",
            "cellClass": "color3",
            "rippleColor": "#F16651",
            "id": "id-aoab",
            "tagIndex": 2
        }],
        "textField": "content",
        "idField": "id",
        "colorField": "rippleColor"
    }]
}

当从未分组计划状态切换到分组计划状态时，按如下方式调用setState方法：

this.setState({
      selectedDate: newProps.selectedDate,
      eventSettings: newProps.eventSettings,
      group: newProps.group,
      ResourcesDirective: newProps.ResourcesDirective,
    });

我们得到以下错误：

ej2 schedule.umd.min.js:10未捕获类型错误：无法读取null的属性“GenerateResourceLevel”

当从分组数据状态切换到非分组数据状态时，会出现以下错误：

未捕获的TypeError:无法将未定义或null转换为对象

当它是初始显示时，对于为分组或未分组状态设置的相同参数，一切正常，只有在从未分组状态切换到分组状态或从分组状态切换到分组状态时才会出现问题。从分组状态切换到另一个状态（通过基于另一个资源分组）也可以正常工作。 我们正在使用

"react": "^16.12.0",
"webpack": "^4.12.0"

在巴拉苏布拉曼尼安回答后编辑

下面是两个stackblitz，再现了上述错误： 1-：单击“取消分组”按钮时发生：错误在控制台中可见

TypeError:无法将未定义或null转换为对象

2-：单击“组”按钮时，我们可以看到：

TypeError:无法读取null的属性“GenerateResourceLevel”

EDIT2在巴拉苏布拉曼尼安的第二个回答之后

现在情况好多了，因为我们可以分组/取消分组（），但我们仍然有另一个问题，我无法重现：当计划最初开始取消分组，然后我们将其分组时，我们得到以下错误：

我试着找出你最新的解组演示有什么不同，我只发现您始终将资源directive包含在ScheduleComponent中，无论分组是否处于活动状态，我们都无法猜测和传递任何资源directive当分组未处于活动状态时，因为我们不知道哪些可能的分组资源将处于活动状态稍后由用户选择，因此我尝试仅为分组案例动态生成它，以便尝试重现我们在本文中得到的错误，但它与我之前看到的错误相同，而不是新的错误：

我们的应用程序中不再出现此旧错误

---

来自Syncfusion支持部门的问候

我们已经验证了您的共享代码片段，并在此基础上准备了一个示例。在下面的示例中，调度程序的资源和组的数据源已在setstate值中声明，可以从以下链接查看示例

代码片段：

export class Timescale extends SampleBase {
  constructor() {
    super(...arguments);
    // this.data = extend([], dataSource.scheduleData.concat(dataSource.timelineData), null, true);
    this.state = {
      resourceDataSource: [],
      grp: []
    };
  }
  componentDidMount() {
    let resourceDataSource = [
      { AirlineName: 'Airways 1', AirlineId: 1, AirlineColor: '#EA7A57' },
      { AirlineName: 'Airways 2', AirlineId: 2, AirlineColor: '#357cd2' },
      { AirlineName: 'Airways 3', AirlineId: 3, AirlineColor: '#7fa900' }
    ];
    let grp = ['Airlines'];
    let that = this;
    setTimeout(() => {
      that.setState({
        resourceDataSource
      });
    }, 2000)
    setTimeout(() => {
      that.setState({
        grp
      });
    }, 2000)
  }
  render() {
    const { resourceDataSource } = this.state;
    const { grp } = this.state;
    return (<div className='schedule-control-section'>
      <div className='col-lg-9 control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent delayUpdate='true' height='650px' ref={schedule => this.scheduleObj = schedule} selectedDate={new Date(2019, 0, 10)} group={{ resources: grp }} timeScale={{ enable: false }}>
            <ResourcesDirective>
              <ResourceDirective field='AirlineId' title='Airline Name' name='Airlines' allowMultiple={true}
                dataSource={resourceDataSource} textField='AirlineName' idField='AirlineId' colorField='AirlineColor'>
              </ResourceDirective>
            </ResourcesDirective>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop]} />
          </ScheduleComponent>
        </div>
      </div>
    </div>);
  }
}

导出类时间刻度扩展SampleBase{
构造函数（）{
超级（…参数）；
//this.data=extend（[]，dataSource.scheduleData.concat（dataSource.timelineData），null，true）；
此.state={
resourceDataSource:[]，
玻璃钢：[]
};
}
componentDidMount（）{
让resourceDataSource=[
{AirlineName:'Airways 1'，AirlineId:1，AirlineColor:'EA7A57'}，
{AirlineName:'Airways 2'，AirlineId:2，AirlineColor:'357cd2'}，
{AirlineName:'Airways 3'，AirlineId:3，AirlineColor:'7fa900'}
];
设grp=['Airlines']；
让那=这；
设置超时（（）=>{
那是一个州({
资源数据源
});
}, 2000)
设置超时（（）=>{
那是一个州({
玻璃钢
});
}, 2000)
}
render（）{
const{resourceDataSource}=this.state；
const{grp}=this.state；
返回(
this.scheduleObj=schedule}selectedDate={new Date（2019,0,10）}group={{{resources:grp}}}时间刻度={{{enable:false}}>
);
}
}

样本：

请尝试上述样品，并返回给我们进一步的帮助

问候,

---

Balasubramanian S

来自Syncfusion支持部门的问候

我们已经验证了您的共享代码片段，并在此基础上准备了一个示例。在下面的示例中，调度程序的资源和组的数据源已在setstate值中声明，可以从以下链接查看示例

代码片段：

export class Timescale extends SampleBase {
  constructor() {
    super(...arguments);
    // this.data = extend([], dataSource.scheduleData.concat(dataSource.timelineData), null, true);
    this.state = {
      resourceDataSource: [],
      grp: []
    };
  }
  componentDidMount() {
    let resourceDataSource = [
      { AirlineName: 'Airways 1', AirlineId: 1, AirlineColor: '#EA7A57' },
      { AirlineName: 'Airways 2', AirlineId: 2, AirlineColor: '#357cd2' },
      { AirlineName: 'Airways 3', AirlineId: 3, AirlineColor: '#7fa900' }
    ];
    let grp = ['Airlines'];
    let that = this;
    setTimeout(() => {
      that.setState({
        resourceDataSource
      });
    }, 2000)
    setTimeout(() => {
      that.setState({
        grp
      });
    }, 2000)
  }
  render() {
    const { resourceDataSource } = this.state;
    const { grp } = this.state;
    return (<div className='schedule-control-section'>
      <div className='col-lg-9 control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent delayUpdate='true' height='650px' ref={schedule => this.scheduleObj = schedule} selectedDate={new Date(2019, 0, 10)} group={{ resources: grp }} timeScale={{ enable: false }}>
            <ResourcesDirective>
              <ResourceDirective field='AirlineId' title='Airline Name' name='Airlines' allowMultiple={true}
                dataSource={resourceDataSource} textField='AirlineName' idField='AirlineId' colorField='AirlineColor'>
              </ResourceDirective>
            </ResourcesDirective>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop]} />
          </ScheduleComponent>
        </div>
      </div>
    </div>);
  }
}

导出类时间刻度扩展SampleBase{
构造函数（）{
超级（…参数）；
//this.data=extend（[]，dataSource.scheduleData.concat（dataSource.timelineData），null，true）；
此.state={
resourceDataSource:[]，
玻璃钢：[]
};
}
componentDidMount（）{
让resourceDataSource=[
{AirlineName:'Airways 1'，AirlineId:1，AirlineColor:'EA7A57'}，
{AirlineName:'Airways 2'，AirlineId:2，AirlineColor:'357cd2'}，
{AirlineName:'Airways 3'，AirlineId:3，AirlineColor:'7fa900'}
];
设grp=['Airlines']；
让那=这；
设置超时（（）=>{
那是一个州({
资源数据源
});
}, 2000)
设置超时（（）=>{
那是一个州({
玻璃钢
});
}, 2000)
}
render（）{
const{resourceDataSource}=this.state；
const{grp}=this.state；
返回(
this.scheduleObj=schedule}selectedDate={new Date（2019,0,10）}group={{{resources:grp}}}时间刻度={{{enable:false}}>
);
}
}

样本：

请尝试上述样品，并返回给我们进一步的帮助

问候,

---

巴拉苏布拉曼尼亚S

感谢您宝贵的耐心。

TypeError: Cannot read property 'generateResourceLevels' of null
    at i.generateColumnLevels (util.js:5)
    at i.renderLayout (util.js:5)
    at e.initializeLayout (util.js:5)
    at e.render (util.js:5)
    at t.n.initializeView (util.js:5)
    at eval (util.js:5)
    at e.notify (dom.js:275)
    at t.n.trigger (util.js:6)
    at eval (util.js:5)
    at e.notify (dom.js:275)

export class Timescale extends SampleBase {
  constructor() {
    super(...arguments);
    // this.data = extend([], dataSource.scheduleData.concat(dataSource.timelineData), null, true);
    this.state = {
      resourceDataSource: [],
      grp: []
    };
  }
  componentDidMount() {
    let resourceDataSource = [
      { AirlineName: 'Airways 1', AirlineId: 1, AirlineColor: '#EA7A57' },
      { AirlineName: 'Airways 2', AirlineId: 2, AirlineColor: '#357cd2' },
      { AirlineName: 'Airways 3', AirlineId: 3, AirlineColor: '#7fa900' }
    ];
    let grp = ['Airlines'];
    let that = this;
    setTimeout(() => {
      that.setState({
        resourceDataSource
      });
    }, 2000)
    setTimeout(() => {
      that.setState({
        grp
      });
    }, 2000)
  }
  render() {
    const { resourceDataSource } = this.state;
    const { grp } = this.state;
    return (<div className='schedule-control-section'>
      <div className='col-lg-9 control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent delayUpdate='true' height='650px' ref={schedule => this.scheduleObj = schedule} selectedDate={new Date(2019, 0, 10)} group={{ resources: grp }} timeScale={{ enable: false }}>
            <ResourcesDirective>
              <ResourceDirective field='AirlineId' title='Airline Name' name='Airlines' allowMultiple={true}
                dataSource={resourceDataSource} textField='AirlineName' idField='AirlineId' colorField='AirlineColor'>
              </ResourceDirective>
            </ResourcesDirective>
            <ViewsDirective>
              <ViewDirective option='Day' />
              <ViewDirective option='Week' />
              <ViewDirective option='WorkWeek' />
              <ViewDirective option='Month' />
            </ViewsDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop]} />
          </ScheduleComponent>
        </div>
      </div>
    </div>);
  }
}

group={isGrouped ? { resources: grp } : undefined}

group={{ resources: isGrouped ? grp : [] }}