2

Actualmente me estoy familiarizando con React, y me tocó realizar una aplicación en donde con un CRUD sencillo debo manejar ciertos valores e insertarlos a la BD desde una API.

En mi componenten FormularioUsuario, deseo insertar en BD los valores id_tipo_usuario, nombre_usuario, descripcion_usuario, pass_usuario.

La opción id_tipo_usuario debe ser un selector con datos provenientes de la api, se realiza desde una ventana modal. Mi problema ocurre al momento de "incrustar los datos" en el selector, dado que estos no son cargados, sólo me llega la respuesta de la api con los datos.

introducir la descripción de la imagen aquí

    import React, {useEffect, useState} from 'react';

import './../../src/App.css';
import {makeStyles} from '@material-ui/core/styles';
import {Table, TableContainer, TableHead, TableCell, TableBody, TableRow, Modal,     Button, TextField, Select, MenuItem} from '@material-ui/core';
import {Edit, Delete} from '@material-ui/icons';
import http from "../http-common";

const baseUrl='/usuario/';
const urlTipoUsuario='/tipo-usuario/'

const useStyles = makeStyles((theme) => ({
modal: {
  position: 'absolute',
  width: 400,
  backgroundColor: theme.palette.background.paper,
  border: '2px solid #000',
  boxShadow: theme.shadows[5],
  padding: theme.spacing(2, 4, 3),
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)'
},
iconos:{
  cursor: 'pointer'
}, 
inputMaterial:{
  width: '100%'
},
root: {
  background: 'linear-gradient(45deg, #060b26 30%, #060b26 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
}
  }));

  function FormularioUsuario(){

    const styles= useStyles();

    const [data, setData] = useState([]);
    const [dataTipoUsuario, setDataTipoUsuario] = useState([]);

    const [modalEliminar, setModalEliminar] = useState(false);
    const [modalInsertar, setModalInsertar] = useState(false);

    const [usuarioSeleccionado, setUsuarioSeleccionado] = useState({
      // id_usuario: '',
      id_tipo_usuario: '',
      nombre_usuario: '',
      descripcion_usuario:'',
      pass_usuario:''
    })

    const handleChange=e=>{
      const {name, value}=e.target;
      setUsuarioSeleccionado(prevState=>({
        ...prevState,
        [name]: value
      }))
    }

    const seleccionarUsuario=(usuario, caso)=>{
      setUsuarioSeleccionado(usuario);
      // (caso==='Editar')?null:abrirCerrarModalEliminar()
      abrirCerrarModalEliminar();
    }

    const getUser = async()=>{
      await http.get(baseUrl)
      .then(response=>{
        const {data:{data}} = response;
        setData(data);
      })
    }

    const getTipoUsuario = async()=>{
      await http.get(urlTipoUsuario)
      .then(response=>{
        console.log("getTipoUsuario response: ",response);
        const {data:{dataTipoUsuario}} = response;
        setDataTipoUsuario(dataTipoUsuario);
      })
    }

    const insertUser = async()=>{
      await http.post(baseUrl, usuarioSeleccionado)
      .then(response=>{
        setData(data.concat(response.data))
        abrirCerrarModalInsertar()
      })
      .catch(error=>{
        this.setState({ errorMessage: error.message });
            console.error('There was an error!', error);
      });
    }

    const deleteUserId = async()=>{
      await http.delete(baseUrl + usuarioSeleccionado.id_usuario)
      .then(response =>{
        setData(data.filter(usuario=>usuario.id_usuario!==usuarioSeleccionado.    id_usuario));
        console.log("response delete: ",response)
        abrirCerrarModalEliminar();
        getUser();
      })
    }

    const abrirCerrarModalEliminar=()=>{
      setModalEliminar(!modalEliminar);
    }

    const abrirCerrarModalInsertar=()=>{

      setModalInsertar(!modalInsertar);
    }

    const bodyInsertar=(
      <div className={styles.modal}>
        <h3>Agregar Nuevo Usuario</h3>
        <TextField name="nombre_usuario" className={styles.inputMaterial}     label="Nombre Usuario" onChange={handleChange}/>
        <br />
        <Select
          labelId="Tipo Usuario"
          id="tipo_usuario"
          value={usuarioSeleccionado}
          onChange={handleChange}
          className={styles.inputMaterial}
        >
         { dataTipoUsuario.map((x,y)=>(
           <MenuItem key={y} value={x}>
           {x}
         </MenuItem>
         ))}
          
        </Select>
        <TextField name="descripcion_usuario" className={styles.inputMaterial}     label="Descripción Usuario" onChange={handleChange}/>
        <br />
        <TextField name="pass_usuario" className={styles.inputMaterial}     label="Contraseña Usuario" onChange={handleChange} type="password"/>
        <br /><br />
        <div align="right">
          <Button color="primary" onClick={()=>insertUser()}>Insertar</Button>
          <Button onClick={()=>abrirCerrarModalInsertar()}>Cancelar</Button>
        </div>
      </div>
    )

    const bodyEliminar=(
      <div className={styles.modal}>
        <p>Estás seguro que deseas eliminar al usuario <b>{usuarioSeleccionado &&     usuarioSeleccionado.nombre_usuario}</b> ? </p>
        <div align="right">
          <Button color="secondary" onClick={()=>deleteUserId()} >Sí</Button>
          <Button onClick={()=>abrirCerrarModalEliminar()}>No</Button>
        </div>
      </div>
    )

    // eslint-disable-next-line react-hooks/exhaustive-deps
    useEffect(async()=>{
      await getUser();
      // await getTipoUsuario();
        },[])
return(

  <div className="usuarios">
  <br />
<Button  className={styles.root} onClick={()=>abrirCerrarModalInsertar()}>Insertar</    Button>
  <br /><br />
 <TableContainer>
   <Table>
     <TableHead>
       <TableRow>
         <TableCell>Id Usuario</TableCell>
         <TableCell>Nombre Usuario</TableCell>
         <TableCell>Descripción Usuario</TableCell>

         <TableCell>Acciones</TableCell>
       </TableRow>
     </TableHead>

     <TableBody>
       {data.map(usuario=>(
         <TableRow key={usuario.id_usuario}>
           <TableCell>{usuario.id_usuario}</TableCell>
           <TableCell>{usuario.nombre_usuario}</TableCell>
           <TableCell>{usuario.descripcion_usuario}</TableCell>
           <TableCell>
             <Edit className={styles.iconos} onClick={console.log("Editar")}/>
             &nbsp;&nbsp;&nbsp;
             <Delete  className={styles.iconos} onClick={()=>seleccionarUsuario    (usuario, 'Eliminar')}/>
             </TableCell>
         </TableRow>
       ))}
     </TableBody>
   </Table>
 </TableContainer>
 
  <Modal
 open={modalInsertar}
 onClose={abrirCerrarModalInsertar}>
    {bodyInsertar}
 </Modal>

 {/* <Modal
 open={modalEditar}
 onClose={abrirCerrarModalEditar}>
    {bodyEditar}
 </Modal> */}

 <Modal
 open={modalEliminar}
 onClose={abrirCerrarModalEliminar}>
    {bodyEliminar}
 </Modal> 
</div>
 );
}

  export default FormularioUsuario;
4
  • Cual seria el problema? No te cargan los datos? el 25 jun. 2021 a las 14:07
  • Hola, disculpa no agregué la pregunta pero esta ya fue editada. Efectívamente ese es el problema, no logro cargar en el selector los datos provenientes de la api
    – Rodrigo
    el 25 jun. 2021 a las 14:15
  • Pero estas material-ui, porque no usas un componente nativo de material para construir tu select? Seria simplemente pasar el array de datos al componente mismo. el 25 jun. 2021 a las 14:18
  • entiendo que lo que me quiere explicar es que me estaría faltando importar el componente de material UI?
    – Rodrigo
    el 25 jun. 2021 a las 15:36

1 respuesta 1

0

Respondiendo a la última pregunta, pasa que estas usando un elemento de HTML, lo que haría un poco más engorroso el construir un select mediante API; y ya que estas usando material-ui, dicha librería tiene componentes para la mayoría de los elementos que necesitas, entre ellos el Select.

Primero, lo que debes hacer es llamar a tu función getTipoUsuario, dentro de un useEffect, el cual sirve para manejar actualizaciones y/o renderizados dependiendo lo que necesites.

useEffect(() => {
   const data = getTipoUsuario()
   setItems(data)
}, [])

Lo que estamos haciendo acá, es que al momento de ingresar a tu componente, el useEffect -el cual debes importar -, se va a ejecutar una única vez, llamará a tu función getTipoUsuario y le pasará los valores a tu state. Después, simplemente recorres items para construir tu lista de selección.

Llevándolo a material sería solo hacer algo así

<FormControl variant="outlined" style={{ minWidth: 120}}>
   <InputLabel>Usuario</InputLabel>
   <Select label="Usuario" value={itemSelected} onChange={handleChange}>
      {items.map((row, index) => (
         <MenuItem key={index} value={row.id}>{row.name}</MenuItem>
      ))}
   </Select>
</FormControl>

Donde items es tu array que deseas desplegar, le asignas el valor mediante un map y listo. Te dejo acá el ejemplo completo para que lo revises.

Nos comentas si te sirvió y en caso de dudas, acá estaremos!

5
  • muchas gracias, edité el codigo de la pregunta original con las modificaciones indicadas, pero aún no me carga datos, entiendo que no estoy llamando a la función getTipoUsuario, pero desconozco en que instante debo hacer ese llamado
    – Rodrigo
    el 25 jun. 2021 a las 16:11
  • @Rodrigo Respuesta editada! el 25 jun. 2021 a las 16:37
  • muchas gracias, ahora funciona
    – Rodrigo
    el 25 jun. 2021 a las 20:42
  • Hola, me quedó una duda... el FormControl no se utiliza si dentro del formulario tengo elementos como Textfield?. Este formulario se compone de 3 select y como 7 textfield
    – Rodrigo
    el 8 jul. 2021 a las 15:56
  • Depende lo que quieres realizar, el formControl funciona como un contenedor al que le puedes dar estilos, asignar variables o cosas así. Si necesitas envolver tus input (TextField, Autocomplete, Select, etc) no hay problema :) el 8 jul. 2021 a las 18:18

Tu Respuesta

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

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