Quiero generar un control de itinerario (elemento de tabla) generado en <RoutingMachine /> . Pero no puedo acceder al elemento html en useEffect porque aún no existe.
const Routing = ({ pointA, pointB }) => { const dispatch = useDispatch() const createLayer = () => { const instance = L.Routing.control({ waypoints: [ L.latLng(pointA.position.lat, pointA.position.lng), L.latLng(pointB.position.lat, pointB.position.lng) ], lineOptions: { styles: [{ color: "red", weight: 4 }] }, }); return instance; }; const RoutingMachine = createControlComponent(createLayer); useEffect(() => { let routeInfo = document.querySelectorAll('tr') console.log(routeInfo) // array with 0 elements }, []); return <RoutingMachine /> };¿Puedes probar esto (con useRef() ):
const Routing = ({ pointA, pointB }) => { const dispatch = useDispatch() const mounted = useRef(true) const createLayer = () => { const instance = L.Routing.control({ waypoints: [ L.latLng(pointA.position.lat, pointA.position.lng), L.latLng(pointB.position.lat, pointB.position.lng) ], lineOptions: { styles: [{ color: "red", weight: 4 }] }, }); return instance; }; const RoutingMachine = createControlComponent(createLayer); useEffect(() => { if (mounted.current) { let routeInfo = document.querySelectorAll('tr') console.log(routeInfo) // array with 0 elements } return () => { mounted.current = false; } }, [mounted]); return <RoutingMachine /> };Puede usar referencias compatibles con el folleto, consulte esta Referencia