1

Estoy aprendiendo a usar Axios en React y sé lo básico, pero cuando se trata de una ruta dinámica (para poder actualizar datos de un cliente específico) no sé cómo hacer la petición

aquí es donde tengo que buscar la data del cliente, el problema es que no sé cómo hace que el id sea dinámico.

Componente EditClient.jsx

useEffect(() => {
    (async () => {
      const response = await axios.get("http://localhost:3000/clients/:id");
      if (response.status === 200 || response.status === 201) {
        setData(response.data);
        console.log(response);
      }
    })();
  }, []);

Componente Clients.jsx

<tr key={index}>
 <td scope="row">{item.id}</td>
 <td scope="row">{item.name}</td>
 <td scope="row">{item.phone}</td>
 <td scope="row">{item.identification}</td>
 <td scope="row">{item.email}</td>
 <td scope="row">{item.active === false ? "No" : "Si"}</td>
 <td scope="row"><Link to={`editclient/${item.id}`}>modificar</Link> / <Link to={"delete"}>eliminar</Link></td>
</tr>

1 respuesta 1

2

tú código es correcto pero para lograr el objetivo tienes que hacer algunos cambios.

Lo primero es que axios solo es un cliente http para hacer peticiones, para lograr el dinamismo, necesitas hacer una petición nueva cada vez que la url se modifique, en tu caso especifico cada vez que el id del cliente cambie; ahora ese id cliente es un parametro que tienes que obtener de la libreria que te proporciona el routeo (no especificas cual usas).

Para realizar la accion en base a lo mencionado, necesitaras especificar que el useEffect se ejecute cada vez que tu parametro se modifique en el router. y así obtener el id nuevo para realizar la petición, te dejo un ejemplo de como lo puedes hacer usando ReactRouter

import { useParams } from 'react-router-dom';
let { userId } = useParams(); // se obtiene de los parametros del path editclient/:userId

useEffect(() => {
    (async () => {
      const response = await axios.get(`http://localhost:3000/clients/${userId}`);
      if (response.status === 200 || response.status === 201) {
        setData(response.data);
        console.log(response);
      }
    })();
  }, [userId]); // especificas que el bloque de código en el useEffect se ejecute cada vez que el userId cambie

Espero esto te ayude a resolver tus dudas

1
  • Gracias!! Me ayudaste muchísimo, había olvidado por completo el useParams jajaja
    – Khristian
    Commented el 5 jul. 2023 a las 1:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.