Uso la biblioteca antd para crear una sección de pestañas. El problema que tengo es cerrar todas las pestañas que se abren al hacer clic en un botón 'cerrar todas las pestañas'. Pero al hacer clic cada vez que solo se cierra la última pestaña abierta.

Tengo dos useStates...focusingPaneKey denota la pestaña que está activa. openingPaneKeys es una matriz de todas las pestañas activas.

Al hacer clic en el botón, se llama al método handleTabsEdit, que nuevamente llamará al método closePane.

 const handleTabsEdit = useCallback((key, action) => { if (action === 'remove') { closePane(key) } }, [closePane]) const closePane = (paneKey) => { if (paneKey === focusingPaneKey) { const paneKeyIndex = openingPaneKeys.indexOf(paneKey) setFocusingPaneKey(openingPaneKeys[paneKeyIndex - 1]) } setOpeningPaneKeys(openingPaneKeys.filter((openingPaneKey) => openingPaneKey !== paneKey)) } return( <Button onClick={() => openingPaneKeys.forEach (id => this.handleTabsEdit(id, 'remove'))}>Close All Tabs</Button> ) const panes = { 1: { key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' }, 2: { key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' }, 3: { key: '3', title: 'Tab 3', content: 'Content of Tab Pane 3' }, }

La lógica principal radica aquí en esta línea que cierra la pestaña.

 setOpeningPaneKeys(openingPaneKeys.filter((openingPaneKey) => openingPaneKey !== paneKey))

¿Qué cambios se deben hacer para cerrar todas las pestañas?