3

tengo un formulario con 3 datos, nombre, dato1, dato2 pero dato1 y dato2 es un array dinámico donde puedo ir agregando varios datos con el boton + a este array, pero no he podido lograr que guarden en base de datos los cuales están php y MySQL , he intentado que mi código funcione pero no lo he logrado, y lo que necesito es que me guarde el array en base de datos, he intentado hacerlo pero no me funciona mi código. Envio mi código fuente:


https://codesandbox.io/s/peaceful-http-bg949?file=/src/App.js

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

import {
  Grid,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper
} from "@material-ui/core";
import AddCircleOutlineIcon from "@material-ui/icons/AddCircleOutline";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import DeleteIcon from "@material-ui/icons/Delete";

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

const useStyles = makeStyles((theme) => ({
  paper: {
    display: "flex",
    flexDirection: "column",
    padding: "30px 40px",
    marginTop: "50px",
    marginLeft: "20px",
    marginRight: "20px"
  },

  heading: {
    paddingLeft: "10px"
  },

  label: {
    lineHeight: "2",
    fontSize: "14px"
  },
  input: {
    height: "10px"
  },
  table: {
    minWidth: 700
  }
}));

const options = [
  { value: 1, label: 1 },
  { value: 2, label: 2 },
  { value: 3, label: 3 }
];

function Pruebas() {
    const baseUrlAd = 'https://www.inventarios.gemcont.com/apiGemcont/compras/ingresos/'; 
    const [data, setData]=useState([]);
    const [frameworkSeleccionado, setFrameworkSeleccionado]=useState({
        id_ingreso:'',
        nombre:'',
        dato1:'',
        dato2:''
      });

    const handleChange=e=>{
        const {name, value}=e.target;
        setFrameworkSeleccionado((prevState)=>({
          ...prevState,
          [name]: value
        }))
       console.log(frameworkSeleccionado);
      }

      const peticionPost = async() =>{
        var f = new FormData();
        f.append("nombre", frameworkSeleccionado.nombre);
        f.append("dato1", frameworkSeleccionado.dato1);
        f.append("dato2", frameworkSeleccionado.dato2);
        f.append("METHOD", "POST_prueba");
        await axios.post(baseUrlAd,f)
        .then(response=>{
         setData(data.concat(response.data));
        }).catch(error=>{
          console.log(error);
        })
    
      }

  const classes = useStyles();

  const [roomInputs, setRoomInputs] = useState([
    { dato1: "", dato2: "" }
  ]);

  const handleRoomChange = (option, index, name) => {
    const value = option.value;
    console.log(value);
    const list = [...roomInputs];
    list[index][name] = value;
    setRoomInputs(list);
  };

  const handleRemoveClickRoom = (index) => {
    const list = [...roomInputs];
    list.splice(index, 1);
    setRoomInputs(list);
  };

  const handleAddClickRoom = () => {
    setRoomInputs([...roomInputs, { dato1: "", dato2: "" }]);
  };

  
 
    return (
<div className="content-wrapper">
    
    <div className="content-header">
      <div className="container-fluid">
        
          <div className="col-sm-12">

          <div class="card">
              <div class="card-header">
              <h3 class="card-title">Datos</h3>
              </div>
            
              <div class="card-body">
                
                  <div class="row">  

                  <div class="col-sm-4">
                  <div class="input-group">
                  <input type="text" name="nombre"
                  placeholder='nombre' className="form-control"/>
                  </div>
                  </div>


                  </div>

                  <div class="row">
                  <div class="col-sm-12">
                  
                  
        <br />
          <Grid item sm={12}>
            <TableContainer component={Paper} variant="outlined">
              <Table className={classes.table} aria-label="customized table">
                <TableHead>
                  <TableRow>
                    <TableCell>#</TableCell>
                    <TableCell align="left">dato1</TableCell>
                    <TableCell align="left">dato2</TableCell>
                  </TableRow>
                  
                </TableHead>
                <TableBody>
                  {roomInputs.map((x, i) => (
                    <StyledTableRow key={i}>
                      <TableCell component="th" scope="row">
                        {i + 1}
                      </TableCell>
                      <TableCell align="left">
                        <input 
                        type="text"
                        className="form-control"
                        name="dato1"
                        value={options.value}
                        onChange={option => handleRoomChange(option, i, "dato1")}
                        />
                      </TableCell>
                      <TableCell align="left">
                      <input 
                        type="number"
                        name="dato2"
                        className="form-control"
                        value={options.value}
                        onChange={option => handleRoomChange(option, i, "dato2")}
                        />
                      </TableCell>

            

                      <TableCell align="left">
                        {roomInputs.length !== 1 && (
                          <DeleteIcon
                            onClick={() => handleRemoveClickRoom(i)}
                            style={{
                              marginRight: "10px",
                              marginTop: "4px",
                              cursor: "pointer"
                            }}
                          />
                        )}
                        {roomInputs.length - 1 === i && (
                          <AddCircleOutlineIcon
                            onClick={handleAddClickRoom}
                            style={{ marginTop: "4px", cursor: "pointer" }}
                          />
                        )}
                      </TableCell>
                    </StyledTableRow>
                  ))}
                </TableBody>
               
                  
              </Table>
            </TableContainer>
          </Grid>
         
      
     
             </div>
                  </div>
                  <br />
                  <button className="btn btn-primary" onClick={()=>peticionPost()}> Registrar</button>
               
              </div>
             
            </div>     

      </div>

      </div>
      </div>
    
  </div>
    )
}



export default Pruebas

PHP

<?php

include '../../bd/global.php';

header('Access-Control-Allow-Origin: *');

if($_POST['METHOD']=='POST_prueba'){
    unset($_POST['METHOD']);
    $nombre=$_POST['nombre'];
    $query="insert into ingresos(nombre) values ('$nombre')";
    $queryAutoIncrement="select MAX(id_ingreso) as id_ingreso from ingresos";
    $resultado=metodoPost($query, $queryAutoIncrement);
    echo json_encode($resultado);
        $num_elementos=0;
        $sw=true;
        while ($num_elementos < count($idarticulo))
        {
            $sql_detalle = "INSERT INTO detalle_ingresos(id_ingreso, dato1, dato2) VALUES ('$idingresonew', '$idarticulo[$num_elementos]','$dato1[$num_elementos]','$dato2[$num_elementos]')";
            ejecutarConsulta($sql_detalle) or $sw = false;
            $num_elementos=$num_elementos + 1;
        }
        
    return $sw;
        
    header("HTTP/1.1 200 OK");
    exit();
}

header("HTTP/1.1 400 Bad Request");


?>

Base de datos introducir la descripción de la imagen aquí

1 respuesta 1

2
+25

La explicación más rápida es que no estas pasando el valor de onChange correctamente. onChange genera un evento. Por lo que necesitas obtenerlo con event.target.value.

En tu codigo:

onChange={option => handleRoomChange(option, i, "dato1")}

Y despues en tu handler lo utilizas de manera incorrecta:

  const handleRoomChange = (option, index, name) => {
    const value = option.value; // incorrecto  
    console.log(value);
    const list = [...roomInputs];
    list[index][name] = value;
    setRoomInputs(list);
  };

Esta es la parte mas obvia. Tambien comento se prefiere no renombrar las acciones predeterminadas (event -> option), manten tu código legible. De esta manera:

  onChange={event => handleRoomChange(event.target.value, i, "dato1")}
  
  ...
  
  const handleRoomChange = (value, index, name) => {
    const list = [...roomInputs ];
    list[index][name] = value;
    setRoomInputs(list);
  };

Algunos tips extra. En general no aprobaria esta manera de mantener tu estado, es compleja y los datos dependen de su posicion en un array. Aunque funciona, luego encontraras problemas como: que pasa si hago click en registrar cuando no hay ningun dato? o cuando he agregado varias lineas que las he dejado todas en blanco? Ya existen muchas soluciones para estas y otras situaciones comunes, una popular es react-hook-forms.

Suerte

6
  • buen dia, pero dato1 y dato2 no creo que esten bien nombrados en "peticionPost"? como deberia quedar teniendo en cuenta de el onchange es diferente al input de nombre que al de dato1 y dato2
    – Giovanny
    Commented el 12 feb. 2022 a las 12:19
  • no entiendo la pregunta. El nombre de la variable event en onChange es local. Es irrelevante. El ejemplo de "dato1" es solo un ejemplo, claro que para el input de "dato2" usaras ese nombre. Dime si esto aclara la duda, tambien recomiendo actualizar tu post original con toda la informacion.
    – keponk
    Commented el 12 feb. 2022 a las 14:19
  • en la funcion post dato1 y dato2 estan asi "f.append("dato1", frameworkSeleccionado.dato1); f.append("dato2", frameworkSeleccionado.dato2);" , pero en ningun momento se le esta asignando frameworkSeleccionado y en la funcion handleRoomChange no se le esta asignando "frameworkSeleccionado"
    – Giovanny
    Commented el 12 feb. 2022 a las 14:26
  • la intención es que en la funcion "peticionPost" que almacenado dato1 y dato2 correctamente ya que desde ahi es donde sale la información para posteriormente almacenarla en base de datos.
    – Giovanny
    Commented el 12 feb. 2022 a las 14:33
  • 1
    Con gusto ayudaria pero aun no me queda claro cual es tu pregunta. Pareceque tienes un problema que resolver y quieres que alguien te diga como resolverlo. Sugiero que elabores en preguntas especificas para obtener respuestas especificas, y no tan generales. Si tienes problemas en peticionPost, explica cual es el problema (que haz intentado, cual fue el resultado, que deberia ser el resultado, etc...), no la intención general.
    – keponk
    Commented el 13 feb. 2022 a las 0:35

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.