Ошибки при переключении из состояния несгруппированных данных в сгруппированные или наоборот в расписании syncfusion (реагировать)

Question

Мы используем 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 Uncaught TypeError: Невозможно прочитать свойство 'generateResourceLevels' со значением null

И при переключении из состояния сгруппированных данных в разгруппированное мы получить эти ошибки:

Uncaught TypeError: Невозможно преобразовать undefined или null в объект

Когда это начальное отображение, все работает нормально для того же параметра Если заданы параметры как для сгруппированных, так и для негруппированных состояний, проблемы возникают только при переключении из негруппированных в сгруппированные состояния или наоборот. Переключение из сгруппированного состояния в другое (путем группировки на основе другого ресурса) также работает нормально. мы используем

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

РЕДАКТИРОВАТЬ ПОСЛЕ ответа Баласубраманяна

Вот два стека, воспроизводящих упомянутые ошибки: 1- https://stackblitz.com/edit/react-gw8qs1-cerwzz: it происходит при нажатии на кнопку «Разгруппировать» : ошибка видна в консоли.

TypeError: Невозможно преобразовать неопределенный или нулевой объект

2- https://stackblitz.com/edit/react-gw8qs1-cz2nhg: при нажатии на кнопку "group" мы видим:

TypeError: Невозможно прочитать свойство 'generateResourceLevels' из null

РЕДАКТИРОВАТЬ 2 ПОСЛЕ второго ответа Баласубраманяна

Теперь все идет намного лучше, поскольку мы можем группировать / разгруппировать ( снимок экрана здесь ), но мы по-прежнему у меня есть еще одна проблема, которую я не могу воспроизвести: когда расписание начинается сначала без группировки, а затем мы группируем его, мы получаем эту ошибку:

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)

Я пытался найти какую-либо разницу с вашими последними демо для разгруппировки, я обнаружил, что вы держите ресурсов Директива всегда включена в 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)

мы больше не получаем эту старую ошибку в нашем приложении.

Answer 1

Спасибо за ваше ценное терпение.

Мы проверили сообщенные вами проблемы с нашей стороны, и для этого мы изменили ваш общий образец. сообщите, что свойство группы зависит от свойства ресурсов. Поэтому мы не можем изменить состояние обоих свойств. Установив значение состояния для свойства группы, достаточно для достижения ваших требований. И для дальнейшего использования, пожалуйста, обратитесь к приведенному ниже коду.

Не нравится ниже:

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

Делает как ниже:

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

Sample1: https://stackblitz.com/edit/react-gw8qs1-rfxh7s?file=index.js

Образец 2: https://stackblitz.com/edit/react-gw8qs1-jcm3c1?file=index.js

Пожалуйста, дайте нам знать, если у вас есть какие-либо вопросы

С уважением,

Баласубраманец S

Answer 2

Привет из службы поддержки Syncfusion.

Мы проверили ваши фрагменты общего кода и подготовили образец на основе этого. В приведенном ниже примере источник данных ресурсов и группы для планировщика был объявлен в значении установки, и образец можно просмотреть по следующей ссылке:

Фрагмент кода:

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

Пожалуйста, попробуйте приведенный выше образец и обратитесь к нам за дополнительной помощью.

С уважением,

баласубраманец S

Answer 3

Мы проанализировали ваш сообщенный сценарий с нашей стороны. Свойство «Группа» взаимосвязано со свойством «Ресурсы». Поэтому, если мы изменим состояние для «Group», оно будет отображено на основе «Resources». Таким образом, ресурсы должны быть инициализированы как наш ранее общий образец. При изменении состояния сначала будет изменена группа, а затем ресурсы; во время изменения состояния группы ресурсы станут нулевыми; в этом случае возникнет ошибка (TypeError: Cannot read свойство «generateResourceLevels 'of null). Поэтому мы предлагаем вам добавить директиву Resources при начальной загрузке и выполнить изменения состояния только для свойства Group, чтобы преодолеть сообщенную проблему.

Пожалуйста, сообщите нам, если у вас есть какие-либо проблемы.