在 syncfusion 的 Schedule (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>;
以下是传递给 ScheduleComponent 的动态生成的 ScheduleComponent 属性/参数集的预览：
1- 未分组数据状态：
{
"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"
}
},
"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"
},
...]
}
}
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 Uncaught TypeError: Cannot read property 'generateResourceLevels' of null
从分组数据状态切换到未分组时，我们出现这些错误：
Uncaught TypeError: Cannot convert undefined or null to object
当它是初始显示时，对于分组或未分组状态设置的相同参数，一切都运行正常，只有从未分组切换到分组状态或反之亦然时才会出现问题。从分组状态切换到另一个状态（通过基于另一个资源进行分组）也可以正常工作。 我们正在使用
"react": "^16.12.0",
"webpack": "^4.12.0"
在 Balasubramanian 的回答之后编辑
这里有两个 stackblitz 重现了提到的错误： 1- https://stackblitz.com/edit/react-gw8qs1-cerwzz ：单击 “取消分组” 按钮时发生这种情况：错误在控制台中可见。
TypeError: Cannot convert undefined or null to object
2- https://stackblitz.com/edit/react-gw8qs1-cz2nhg ：单击 “group” 按钮时，我们可以看到：
TypeError: Cannot read property 'generateResourceLevels' of null
在 Balasubramanian 的第二个答案之后的 EDIT2
现在情况好多了，因为我们可以分组/取消分组（ 屏幕截图在这里 ）但我们仍然有另一个我无法重现的问题：当计划最初未分组时，然后我们将其分组，我们收到此错误：
Uncaught TypeError: Cannot use 'in' operator to search for '__eventList' in null at Function.e.addOrGetEventData (ej2-base.umd.min.js:10) at Function.e.remove (ej2-base.umd.min.js:10) at i.unwireEvents (ej2-schedule.umd.min.js:10) at i.destroy (ej2-schedule.umd.min.js:10) at t.n.destroy (ej2-schedule.umd.min.js:10) at t.n.componentWillUnmount (ej2-react-base.umd.min.js:10) at callComponentWillUnmountWithTimer (react-dom.development.js:21896) at HTMLUnknownElement.callCallback (react-dom.development.js:336) at Object.invokeGuardedCallbackDev (react-dom.development.js:385) at invokeGuardedCallback (react-dom.development.js:440)
我试图找出您最新的取消分组演示之间的任何区别，我只发现您始终将 ResourcesDirective 包含在 ScheduleComponent 是否处于分组状态，并且当分组未处于活动状态时，我们无法猜测并传递任何 ResourcesDirective ，因为我们不知道用户稍后会选择哪些可能的分组资源，因此我尝试仅针对分组情况动态生成它，以尝试重现我们在此 stackblitz 中遇到的错误，但这是我之前看到的相同错误，而不是新错误：
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)we don't get this old error anymore in our app.
group 属性依赖于 resources 属性。因此我们无法更改这两个属性的状态。通过设置 group 属性的状态值就足以满足您的要求。
不要这样做：
group={isGrouped ? { resources: grp } : undefined}
这样做：
group={{ resources: isGrouped ? grp : [] }}
示例 1： https://stackblitz.com/edit/react-gw8qs1-rfxh7s?file=index.js
示例 2： https://stackblitz.com/edit/react-gw8qs1-jcm3c1?file=index.js
我们已验证您共享的代码片段，并据此准备了一个示例。在下面的示例中，调度程序的资源和组的数据源已在 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>);
}
}
示例： https://stackblitz.com/edit/react-gw8qs1-eqrtwk?file=index.js
“Group”属性与“Resources”属性相互关联。因此，如果我们更改“Group”的状态，它将基于“Resources”进行呈现。因此，应按照我们之前共享的示例初始化资源。在更改状态时，将首先更改 Group，然后更改资源，在更改 Group 状态时，资源变为 null，在这种情况下，将发生报告的错误（TypeError：无法读取 null 的属性“generateResourceLevels”）。因此，我们建议您在初始加载时添加 Resources 指令，并单独执行 Group 属性的状态更改以解决报告的问题。