Uso un árbol de mui v5 y quiero agregar el nodo searchParams que está seleccionado y expandido. Para hacer esto, uso el gancho useSearchParams de React Router (v6).
El hecho es que el evento seleccionado y expandido se activan en la misma representación del componente.
Entonces, cuando el primero escribe parámetros por setSearchParams (...), el segundo hace lo mismo pero con los mismos parámetros de búsqueda y borra los parámetros establecidos por el primero.
Hice un CodeSandBox que reproduce el comportamiento.
Intento usar una referencia para permitir la mutación de freshSearchParams pero no tuve éxito.
El problema es que el componente TreeView envía onNodeSelect y onNodeToggle en el mismo clic. Una cosa que puede hacer es personalizar las funciones handleToggle y handleSelect , para que combinen las dos variables expanded y selected .
Tomaría otro enfoque para este escenario. Usaría un enlace personalizado que maneje el estado del árbol y envuelva ese estado con esa funcionalidad de searchParams. Puede inicializar el estado desde la URL y actualizar los parámetros de búsqueda cuando se actualice el estado. Implementaría esa actualización de URL con un useEffect que compara el estado con la URL y realiza las actualizaciones apropiadas.
Aquí hay una posible implementación de ese enlace personalizado.
const useTreeUrlStatus = () => { const [searchParams, setSearchParams] = useSearchParams(); const [state, setState] = useState(() => { return { selected: searchParams.get("selected") ?? "", expanded: searchParams.get("expanded") ? searchParams.get("expanded").split(",") : [] }; }); useEffect(() => { if ( searchParams.get("selected") !== state.selected || searchParams.get("expanded") !== state.expanded ) { setSearchParams({ selected: state.selected, expanded: state.expanded.join(",") }); } }, [state, searchParams, setSearchParams]); const updateState = (key, value) => { setState((prevState) => { const newState = { ...prevState, [key]: value }; return newState; }); }; return [state, updateState]; };Tiene un sandbox de trabajo aquí bifurcado de su sandbox publicado.