Рендеринг 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