• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

228
Views
Obtener valores de url usando useParams

Tengo un formulario React con Material-UI. Me gustaría obtener la identificación del enlace URL usando useParams y realizar algunas solicitudes de API para completar los datos del formulario:

 http://localhost:3001/profile?ids=9459377

Aplicación principal.tsx:

 function App() { return ( <Router> <Navbar /> <Switch> <Route path='/ticket-profile/:ids' component={TicketProfile} /> </Switch> </Router> ); }

Uso este código para abrir una nueva página y pasar ids param:

 history.push(`/ticket-profile/ids=${id}`)

Necesito obtener los datos en esta página:

 export default function TicketProfile(props: any) { let { ids } = useParams(); const [ticket, setTicket] = useState<TicketDTO[]>([]); useEffect(() => { getSingleTicket(); }, []); const getSingleTicket = async () => { getTicket(ids) .then((resp) => { setTicket(resp.data); }) .catch((error) => { console.error(error); }); }

Pero para esta línea let { ids } obtengo:

TS2339: Property 'ids' does not exist on type '{}'.

¿Sabes cómo puedo solucionar este problema?

almost 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Entonces esta es la URL

 http://localhost:3001/profile?ids=9459377

en tu codigo

 const MyComponent = () => { const params = new URLSearchParams(window.location.search);

¡Eso es todo! Ahora debemos pasar a obtener el valor y verificar la existencia de las cadenas de consulta.

Compruebe si tiene la consulta;

 params.has('ids')

u obtenga el valor que está dentro de la cadena de consulta

 params.get('ids')

También puedes mostrarlos condicionalmente.

 console.log(params.has('ids')?params.get('ids'):"")

Actualizar:

Mira el ejemplo de trabajo

https://codesandbox.io/s/peaceful-https-vz9y3?file=/src/App.js\ Así es como deberíamos usarlo en tu caso

 export default function TicketProfile(props: any) { const params = new URLSearchParams(window.location.search); const ids = params.get('ids'); const [ticket, setTicket] = useState<TicketDTO[]>([]); useEffect(() => { getSingleTicket(); }, []); const getSingleTicket = async () => { getTicket(ids) .then((resp) => { setTicket(resp.data); }) .catch((error) => { console.error(error); }); }
almost 3 years ago · Juan Pablo Isaza Report

0

Supongo que estás usando useParams de react-router. Si es así, inténtalo aquí.

 let { ids } = useParams<{ ids: Array<any>}>();
almost 3 years ago · Juan Pablo Isaza Report

0

Estás empujando un camino equivocado a la historia. Pruébalo así:

 history.push(`/ticket-profile/${id}`)
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error