Рендеринг React-компонентов в Microsoft Edge

Столкнулась с проблемой некорректного перендеринга React-компонента в браузере Microsoft Edge (В других браузерах все работает хорошо - например, в Chrome, Opera).

У меня есть компонент со следующим кодом (для удобства здесь в return верстка только места с ошибкой):

const Header:React.FC<WeekElementState> = ({week}) => {
  const {selectDay, changeWeek} = useActions();
  const {selectedDay} = useTypedSelector(state=>state.selectElements);
  const {renderWeek} = useTypedSelector(state=>state.events);

  const firstDate = dayjs(new Date(week[0].year(), week[0].month(), week[0].date()));
  const secondDate = dayjs(new Date(week[6].year(), week[6].month(), week[6].date()));

  function clickPrevWeek() {
    selectDay(dayjs(new Date(week[0].year(), week[0].month(), week[0].date() - 7)));
    changeWeek(renderWeek - 1);
  };
  function clickNextWeek() {
    selectDay(dayjs(new Date(week[0].year(), week[0].month(), week[0].date() + 7)));
    changeWeek(renderWeek + 1);
  };

  return (
    <Box>
          <ChevronLeftIcon onClick={clickPrevWeek}/>
          <ChevronRightIcon onClick={clickNextWeek}/>
          <Typography variant="h6" component="h2" sx={{m: 1}}>
            {firstDate.format("MMMM")}
            {firstDate.year() !== secondDate.year() && firstDate.format(" YYYY")}
            {firstDate.month() !== secondDate.month() && secondDate.format(" - MMMM")}
            {secondDate.format(" YYYY ")}
            {firstDate.date()} - {secondDate.date()}
          </Typography>
    </Box>
  )
}

Здесь selectDay - устанавливает переменную selectedDay в store, changeWeek устанавливает переменную renderWeek в store. Компоненты из библиотеки mui.

В главном компоненте App приложения стоит такой UseEffect

  useEffect(() => {
    selectWeek(getWeek(selectedDay));
  }, [selectedDay]);

Он меняет неделю selectedWeek, которая передается в пропсы Header в компоненте App:

<Header week={selectedWeek}/>

getWeek здесь просто возвращает массив из dayjs.Dayjs

Теперь перейдем к проблеме. Если перелистнуть неделю (нажать на стрелочку и выполнится функция clickNextWeek, то переменные firstDate, secondDate поменяются, но не перерендерятся в компоненте Header. (поменяется selectedDay, и, соответственно, selectedWeek, который будет передан в Header в виде week). Если перелистнуть неделю ещё раз, то выскочит следующая ошибка:

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Ошибка в элементе Typography

The above error occurred in one of your React components:
at h2
at http://127.0.0.1:3000/static/js/bundle.js:9057:66
at Typography (http://127.0.0.1:3000/static/js/bundle.js:37097:87)
...

Проблема в том, что Edge не может нормально перерендеривать компоненты... Аналогичная проблема у меня при получении данных пользователя с помощью fetch. Объект User состоит из нескольких полей (включающих имя, почту...). При его передаче в приложении может отобразиться только почта, а имя нет.

Вообщем, помогите, пожалуйста, понять, что не так с Microsoft Edge


Ответы (0 шт):