在同步融合的时间表（反应）中从未分组的数据状态切换到分组的状态时发生错误，反之亦然

问题描述 投票：0回答：2

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

这是标记的外观：

<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未捕获的TypeError：无法读取null的属性'generateResourceLevels'

当从分组数据状态切换到未分组状态时，会得到这些错误：

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

当是初始显示时，对于为分组状态或未分组状态设置的相同参数，一切都可以正常工作，仅当从未分组状态切换为分组状态时才发生问题，反之亦然。从分组状态切换到另一状态（通过基于另一资源的分组）也可以正常工作。我们正在使用

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

编辑巴拉伯拉曼尼安后的答案

以下是两个重现上述错误的堆栈闪电战：1- https://stackblitz.com/edit/react-gw8qs1-cerwzz：单击“ Ungroup”按钮时发生：错误在控制台中可见。

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

2- https://stackblitz.com/edit/react-gw8qs1-cz2nhg：单击“ group”按钮时，我们可以看到：

TypeError：无法读取null的属性'generateResourceLevels'

reactjs webpack schedule syncfusion
2个回答
0
投票

来自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>);
  }
}

示例：https://stackblitz.com/edit/react-gw8qs1-eqrtwk?file=index.js

请尝试以上示例，并再次寻求我们的帮助。

问候，

Balasubramanian S

0
投票

感谢您的宝贵耐心。

我们已在最后验证了您报告的问题，同样，我们也修改了您的共享示例。让您知道，group属性依赖于resources属性。因此，我们无法同时更改两个属性的状态。通过为组属性设置状态值足以满足您的要求。为了进一步参考，请参考以下代码。

不喜欢以下内容：

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

如果有任何疑问，请告诉我们

问候，

Balasubramanian S

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.