0

Estoy empezando a usar REACT, y quisiera saber como puedo hacer peticiones a VARIAS url. Otra, de paso. Se puede usar dos componentes? o sea, integrar uno con otro?

Tengo el sigueinte código en react:

function AppProductos() {
  const urlProductos="http://localhost/API/productos/";
  const [data, setData]=useState([]);

  const peticionGet=async()=>{
    await axios.get(urlProductos)
    .then(response=>{
      setData(response.data);
    }).catch(error=>{
      console.log(error);
    })
  }

  return(
    <div style={{textAlign: 'center'}}>
      <br/>
      <button className="btn btn-success" onClick={()=>abrirCerrarModalInsertar()}>Insertar</button>
      <br/><br/>
      <Modal isOpen={modalInsertar}>
        <ModalBody>
          <div className="form-group">
            <label>Nombre: </label>
            <br />
            <input type="text" className="form-control" name="nombre" onChange={handleChange}/>
            <br />
            <label>Descripción: </label>
            <br />
            <select name="marca" id="" onChange={handleChange}>
               "ESTE SELECT SE TIENE QUE LLENAR CON LAS MARCAS TRAIDAS DE LA API por URL: http://localhost/API/marcas/"
                
            </select>
            <br />
          </div>
        </ModalBody>
      </Modal>
    </div>
  );
}

export default AppProductos;

esto es lo que necesito! como puedo hacer?

DESDE YA MUCHAS GRACIAS!

1
  • ¿Quieres llenar el select con los datos asincronicos de la función peticionGet? Y también ¿Quieres crear un componente padre para administrar el estado de los datos y un componente hijo para mostrar el select? Saludos
    – g.4
    Commented el 10 nov. 2020 a las 21:47

1 respuesta 1

1

Para hacer las peticiones puedes hacer lo siguiente:

import React, { useState, /*importante importa useEffect*/ useEffect } from 'react'

function AppProductos() {
  const urlProductos = "http://localhost/API/productos/";
  const urlMarcas = "http://localhost/API/marcas/";
  const [data, setData] = useState({ 'marcas': [], 'productos': [] });

  /** entiendo que de la siguiente manera es que deseas hacer las peticiones **/

  /*const peticionGet=async()=>{
    await axios.get(urlProductos)
    .then(response=>{
      setData(response.data);
    }).catch(error=>{
      console.log(error);
    })
  }*/

  /** pero puedes hacerlas mejor (con axios y async await (es importante aclarar que al haber un error automaticamente javascript detendra la ejecucion y mostrara el problema en consola)) **/
  useEffect(() => {
    (async () => {
      await getProductos()
      await getMarcas()
    })();
  }, [])

  const getProductos = async () => {
    const response = await axios.get(urlProductos).data;
    setData({ ...data, productos: response });
  }

  const getMarcas = async () => {
    const response = await axios.get(urlMarcas).data;
    setData({ ...data, marcas: response });
  }

  return(
    <div style={{textAlign: 'center'}}>
      <br/>
      <button className="btn btn-success" onClick={()=>abrirCerrarModalInsertar()}>Insertar</button>
      <br/><br/>
      <Modal isOpen={modalInsertar}>
        <ModalBody>
          <div className="form-group">
            <label>Nombre: </label>
            <br />
            <input type="text" className="form-control" name="nombre" onChange={handleChange}/>
            <br />
            <label>Descripción: </label>
            <br />
            <select name="marca" id="" onChange={handleChange}>
               {data.marcas.map((item, i) => (
                 <option value={item['campoAGuardar']}>{item['campoAMostrar']}</option>
               ))}                
            </select>
            <br />
          </div>
        </ModalBody>
      </Modal>
    </div>
  );
}

Sobre lo de anidar componentes no se a que te refieres pero puedes hacer lo siguiente:

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'

import {
  Typography,
  Container,
  Link,
} from '@material-ui/core'

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  }
}));

function AppTitle({ title, url, urlTitle }) {
  return (
    <div className={classes.root}>
      <Container maxWidth='md'>
        <Typography
          variant='h3'
          component='p'
          align='center'
          color='primary'
        >
          {title} <Link href={url} target='_blank'>{urlTitle}</Link>
        </Typography>
      </Container>
    </div>
  )
}

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppTitle
        title='Te recomiendo muchisimo:'
        url='https://material-ui.com'
        urlTitle='@material-ui'
      />
    </div>
  )
}

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.