«Не удается прочитать свойства NULL (чтение« обновление »)» при закрытии всех панелей с левтом/рулемером ⇐ Javascript

[Anonymous]

Я строю электронное приложение, используя React и Dockview.
Все работает нормально, пока я не добавлю пользовательский левша или rightheader в мой макет Dockview.

Код: Выделить всё

 dockview.js?v=9f8bd5fa:10135 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'update')
at ref (dockview.js?v=9f8bd5fa:10135:34)
at chunk-DKQ3ZUBM.js?v=9f8bd5fa:88:9
at z (chunk-DKQ3ZUBM.js?v=9f8bd5fa:184:47)
at chunk-DKQ3ZUBM.js?v=9f8bd5fa:169:7
at Array.forEach ()
at c.unmount (chunk-DKQ3ZUBM.js?v=9f8bd5fa:167:30)
at l.unmount (chunk-DKQ3ZUBM.js?v=9f8bd5fa:321:71)
at B (chunk-IK43DHMW.js?v=9f8bd5fa:238:22)
at B (chunk-IK43DHMW.js?v=9f8bd5fa:246:65)
at P (chunk-IK43DHMW.js?v=9f8bd5fa:81:116)

Это происходит только тогда, когда используется Leftheader или rightheader .
Если я удалю их, закрытие всех панелей работает нормально без ошибок.
код моего проекта:
{
layoutHistoryService.saveSnapshot();

const id = `panel-${Date.now()}`;
const title = `Panel ${Math.floor(Math.random() * 1000)}`;

dockviewRef.current?.addPanel({
id,
component: 'default',
title,
params: { title },
});
};

const saveLayout = () => {
const layout = dockviewRef.current?.toJSON();
if (layout) {
localStorage.setItem('dockview-layout', JSON.stringify(layout));
alert('Layout saved');
}
};

const loadLayout = () => {
const str = localStorage.getItem('dockview-layout');
if (str) {
layoutHistoryService.saveSnapshot();
const layout = JSON.parse(str);
dockviewRef.current?.fromJSON(layout);
} else {
alert('No layout saved');
}
};

const Panel = (props: IDockviewPanelProps) => {
const handlePopout = () => {
const api = dockviewRef.current;
const panelApi = props.api;

if (!api || !panelApi || !panelApi.group) {
console.warn('Popout not ready');
return;
}

layoutHistoryService.saveSnapshot();

api.addPopoutGroup(panelApi.group, {
position: { left: 100, top: 100, width: 800, height: 600 },
});
};

return (

{props.params?.title ?? props.title}
Pop Out

);
};

const LeftHeader = () => {
const handleClick = () => {
layoutHistoryService.saveSnapshot();
const id = `left-panel-${Date.now()}`;
dockviewRef.current?.addPanel({
id,
component: 'default',
title: `Left Add ${Math.floor(Math.random() * 100)}`,
params: { title: 'Created from Left Header' },
});
};

return (



);
};

const RightHeader = () => {
return (

layoutHistoryService.undo()}
title="Undo"
>



layoutHistoryService.redo()}
title="Redo"
>



alert('Right header action triggered')}
title="Info"
>



);
};

const dockviewProps: IDockviewReactProps = {
className: 'dockview-theme-dark',
components: {
default: Panel,
},
onReady: ({ api }) => {
dockviewRef.current = api;
layoutHistoryService.setApi(api); // Register Dockview API

if (!localStorage.getItem('dockview-layout')) {
api.addPanel({
id: 'panel-1',
component: 'default',
title: 'Panel 1',
params: { title: 'Panel 1' },
});
api.addPanel({
id: 'panel-2',
component: 'default',
title: 'Panel 2',
params: { title: 'Panel 2' },
});
}
},
leftHeaderActionsComponent: LeftHeader,
rightHeaderActionsComponent: RightHeader,
};

useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (e.ctrlKey && e.key === 'z') {
e.preventDefault();
if (e.shiftKey) {
layoutHistoryService.redo();
} else {
layoutHistoryService.undo();
}
} else if (e.ctrlKey && e.key === 'y') {
e.preventDefault();
layoutHistoryService.redo();
}
};

window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
}, []);

return (
style={{
height: '100vh',
display: 'flex',
flexDirection: 'column',
background: '#1e1e1e',
}}>

Add Panel
Save Layout
Load Layout




);
}
< /code>
Я загружаю это приложение в свое окно электронного рендеринга с помощью React.
Dockview прекрасно работает для добавления /снятия панелей, но как только я закрываю последнюю панель, когда присутствует заголовок, возникает ошибка. Project.
[*] Добавить любой пользовательский Leftheader [/code] или rightheader в DockViewReact.
Откройте несколько панелей. Появляется. < /li>
< /ul>
Что я думаю, происходит?

Когда последняя панель в группе закрыта, Dockview разрушает группу.
Если есть пользовательский заголовок, Dockview по -прежнему пытается вызвать Update () < /code> после того, как группа исчезнет, что приводит к группе (или API), которая является NULL. < /p>
< /p>





React 18 < /li>
dockview-core /dockview-react (последний по состоянию на август 2025) Update () заголовок после уничтожения группы?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... anels-with