Actualmente intento mostrar la ubicación según el número de identificación seleccionado en el menú desplegable. Actualmente tengo un controlador que tomará la ID seleccionada actual en el menú desplegable. Solo tengo un par de preguntas.
https://jsfiddle.net/Yellohh/wq0trdas/30/
const request = axios.create({ baseURL: "https://veselka.maka-ars.com", timeout: 30000, }); const endpointIds = "/fiddle/getIds"; function Dropdown() { const [ids, setIds] = React.useState([]); const [location, setLocation] = React.useState(); const [value, setValue] = React.useState([]); React.useEffect(() => { request.get(endpointIds).then((response) => { const loadedIds = []; for (const id of response.data.ids) { loadedIds.push({ id }); } setIds(loadedIds); }); }, []); /* const endpointLocation = "fiddle/getLocation/" + event.target.value; */ React.useEffect(() => { request.get(endpointLocation).then((response) => { const loadedLocation = response.data.location; setLocation(loadedLocation); }); }, []); const valueChangeHandler = (event) => { setValue(event.target.value); }; console.log(event.target.value); const idsList = ids.map((id) => <option>{id.id}</option>); return ( <div> <select onChange={valueChangeHandler}>{idsList}</select> <p>{location}</p> </div> ); }Para su segunda pregunta, podría darle al estado un valor inicial. ¿Quizás tienes una identificación en mente?
Puede hacerlo a través de: (en este caso, -1 es el valor inicial)
const [location, setLocation] = React.useState(-1);También puede validar los parámetros de la solicitud antes de ejecutar la solicitud, en este caso validarlo está definido.
Para su primera pregunta; ¿Son las acciones parte del mismo flujo? Al igual que una determinada acción del usuario, siempre inicia un flujo que debe desencadenar ambas acciones, o pueden desencadenarse de forma independiente. En caso afirmativo, en mi opinión, se pueden agrupar.
Otro consejo, echa un vistazo al concepto de reducción de matriz. Puede hacer que los bucles for extraigan valores más legibles.
Para responder a su primera pregunta para que la solicitud se envíe cada vez que cambie el valor del usuario, agregue el valor como una dependencia dentro de useEffect.
Y sobre su segunda pregunta antes de enviar una solicitud, asegúrese de tener un valor, si no solo regresa
React.useEffect(() => { if (!value) return; request.get(endpointLocation).then((response) => { const loadedLocation = response.data.location; setLocation(loadedLocation); }); }, [value]);