更新 ScheduleComponent 中的字段后，选择处理程序在错误的字段键 (id) 下返回 EndTime 日期

如何解决更新 ScheduleComponent 中的字段后，选择处理程序在错误的字段键 (id) 下返回 EndTime 日期

我正在更新 ScheduleComponent 的 eventSettings 字段，我什至正在创建一个新的 Object 实例以确保计划将检测到更改（就像我之前更新数据源所做的那样）

eventSettings.dataSource = eventSettings.dataSource ? [...eventSettings.dataSource] : [];
eventSettings.fields = eventSettings.fields ? { ...eventSettings.fields } : {};

实际上我只是在更改 EndTime 日期的字段，更改后日程显示将是正确的。

为了更好地解释它，最初我将这组字段传递给计划：

eventSettings.fields: {
    "id": "id","subject": {
        "title": "texxt85","name": "4b0c5bdf-41b0-4478-990c-41d06b9941ae"
    },"startTime": {
        "title": "Start Date","name": "0dc9cc20-3c87-4652-a42d-f4cab47e6395"
    },"endTime": {
        "title": "Duration","name": "41ef8a19-5ba2-427a-baf7-1685615c5047"
    }
}

然后我更新 EndTime 日期的字段并通过 react setState() 调用再次将其传递给日程

eventSettings.fields: {
    "id": "id","endTime": {
        "title": "End Date","name": "be71318d-b814-4272-b03c-7a9b94442ed2"
    }
}

但是后来当我在日程表中选择一个范围时，这就是我在选择处理程序中得到的：

onSelect::args.data: {
    "0dc9cc20-3c87-4652-a42d-f4cab47e6395": "2021-01-10T23:00:00.000Z","41ef8a19-5ba2-427a-baf7-1685615c5047": "2021-01-17T23:00:00.000Z",//<=== wrong date key!!
    "IsAllDay": true,"83f4ae53-93a8-4921-a94c-fc96736f9dee": "id-ixg3","1868cae2-f955-4431-8db0-b5afdaf2d2ce": "id-fnlo","93a8de4e-cdcc-4daf-960e-4df7466c128b": "id-h41t","f5f6c085-84cd-4361-aa5d-f1fe6a19e94f": "13b8325c-6365-4920-884b-3d3341c419f3","aaa86022-3c55-4ae0-9dab-fc0f0780f763": "633aa4f1-5a85-11eb-a43b-9d6d9ae8565b","7d3d9187-81a9-4ccf-aea2-9f125b010b97": "633aa4f1-5a85-11eb-a43b-9d6d9ae8565b"
}

我在前一个日期字段名称下获取 EndTime 的日期值。似乎时间表上的选择不知道我所做的 eventSettings 字段更新。有没有更好的方法来更新 eventSettings 的字段？我希望我能在可能的情况下解决这个问题

解决方法

来自 Syncfusion 支持的问候..！

我们已经验证了您报告的查询，并让您知道当您动态更改不会在调度程序之前的数据源中维护的字段名称时。由于您更改了呈现约会所必需的结束时间字段，因此您将看不到该约会。

我们准备了两个不同的示例来展示当您更改必填字段（结束时间）和非必填字段（主题）时时间表的行为。

更改结束时间：https://stackblitz.com/edit/react-state-change-scheduler-sample-xfrvv6?file=index.js
更改主题：https://stackblitz.com/edit/react-state-change-scheduler-sample?file=index.js

constructor() {
super(...arguments);
this.data = [
  {
    Id: 1,Subject: "Testing",StartTime: new Date(2019,10,0),EndTime: new Date(2019,15,0)
  }
];
this.state = {
  data: []
};   }   componentDidMount() {
let data = {
  subject: { name: "Title" }
};

let that = this;
setTimeout(() => {
  that.setState({
    data
  });
},2000);   }   render() {
const { data } = 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,10)}
          eventSettings={{ fields: data,dataSource: this.data }}
        >
          <ViewsDirective>
            <ViewDirective option="TimelineDay" />
            <ViewDirective option="TimelineWeek" />
            <ViewDirective option="TimelineWorkWeek" />
            <ViewDirective option="TimelineMonth" />
          </ViewsDirective>
          <Inject
            services={[
             TimelineViews,TimelineMonth,Agenda,Resize,DragAndDrop
            ]}
          />
        </ScheduleComponent>
      </div>
    </div>
  </div>
);   
}

注意：如果您将事件字段从一种状态更改为另一种状态，那么旧状态中的事件将在调度程序中使用旧的字段名称进行维护，因为事件是根据该字段名称映射的.因此，在第一个示例中，不会显示约会，因为结束时间是强制性的，而在第二个示例中，状态更改后呈现的约会没有主题名称。

请尝试上述场景，如果您需要任何进一步的帮助，请联系我们。

问候，
哈雷什