3

Estimados tengo un input type: checkbox el cual recorro y genero un array de datos y lo tengo en el state, al enviar el post se guarda en ua BD mongo, donde solo me inserta el primer array del checkbox, y no todos los checks seleccionados, he intentado de varias maneras pero no me inserta correctamente. creo que en el reducer tengo enviar esa matriz pero no lo consigo. dejare lo que tengo. si algune me puede dar una mano se lo agadecere mucho , si neseitan mas info la puedo pasar, tengo el server de prueba con express, mongodb, mongoose, el modelo de datos etc.

// JSX

import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { preRegisterAddNew } from "../../redux/actions/PreRegister";
import { useForm } from "../../hooks/useForm";


export const FormPreRegistro = ({ handleValidated }) => {
  
const [isChecked, setisChecked] = useState([]);

useEffect(() => {
  let isChecked = [
    { id: 1, value: "Rubro 1" },
    { id: 2, value: "Rubro 2" },
    { id: 3, value: "Rubro 3" },
    { id: 4, value: "Rubro 4" },
  ];



  setisChecked(
    isChecked.map(d => {
      return {
        select: false,
        id: d.id,
        value: d.value
      };
    })
  );
},[])

const [formValues, handleInputChange] = useForm({
    idFiscal: "",
    pais: "",
    empresa: "",
    comprador: "",
    comentario: "",
  });

  const dispatch = useDispatch();

  const { idFiscal, pais, empresa, comprador, comentario } = formValues;

  const [ rubro ] = isChecked;

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(preRegisterAddNew(
      idFiscal, 
      pais, 
      rubro, 
      empresa, 
      comprador, 
      comentario
      
      ));
    handleValidated();
  };
  
  return (
    <form name="form" className="form-group" onSubmit={handleSubmit}>
      <div className="row">
        <div className="form-group col-md-12 col-12 mb-3">
          <label htmlFor="rubro">Seleccione Rubro</label>
          <div className="multiselect">
            <div className="selectBox"></div>
            <div className="checkboxes overflow-auto">
            {isChecked.map((d) => (
              <div key={d.id}>
              <span>
                <input
                  onChange={event => {
                    let checked = event.target.checked;
                    setisChecked(
                      isChecked.map(data => {
                        if (d.id === data.id) {
                          data.select = checked;
                        }
                        return data;
                      })
                    );
                  }}
                  type="checkbox"
                  checked={d.select}
                  name="rubro"
                ></input>
             </span>
             <span>{d.value}</span>
             </div>
          ))}

            </div>
          </div>
        </div>
       
       
        <div className="d-grid gap-2">
          <button type="submit" className="btn bg-button block subtitle">
            Validar
          </button>
        </div>
      </div>
    </form>
  );
};

// REDUCER

import { types } from "../types/types";

const dataInicial = {
    idFiscal: null,
    pais: null,
    rubro: [],
    empresa: null,
    comprador: null,
    comentario: null,
}

export const preRegistroReducer = (state = dataInicial , action) => {
    
    switch (action.type) {
       case types.preRegisterAddNewStart:

           return {
               ...state,
               ...action.payload
           }
    
        default:
            return state;
    }

}

// ACTIONS

import { fetchWithoutToken } from "../helpers/fetch"
import { types } from "../types/types";

export const preRegisterAddNew = ( idFiscal, pais, rubro, empresa, comprador, comentario ) => {
    return async (dispatch) => {
        const resp = await fetchWithoutToken("preRegistro/new", { idFiscal, pais, rubro, empresa, comprador, comentario }, "POST");
        const body = await resp.json();
        console.log(body, 'el body');

        if (body.ok) {
            dispatch({
                type: types.preRegisterAddNewStart,
                payload: {
                    idFiscal,
                    pais,
                    rubro,
                    empresa,
                    comprador,
                    comentario
                }
            }) 
        } else {
            console.log(body.msg, 'error');
        }

    }
};

4
  • 1
    ¿Tienes repositorio? saludos
    – g.4
    Commented el 14 oct. 2021 a las 18:45
  • @g.4 si pero te lo puedo pasar en privado, pasame un chat. algo te subo el backend y frontend Commented el 14 oct. 2021 a las 19:05
  • @g.4 hola me das un correo y te comparto los repositorios, Gracias. Commented el 14 oct. 2021 a las 20:50
  • deje msj en el chat
    – g.4
    Commented el 14 oct. 2021 a las 22:25

1 respuesta 1

0

Puede ser un problema en el archivo FormPreRegistro, si pudieras probar lo siguiente.

Aquí, reemplaza rubro por isChecked así:

const handleSubmit = (e) => { 
e.preventDefault(); 
dispatch(preRegisterAddNew( 
idFiscal, 
pais, 
isChecked, //rubro
empresa, 
comprador, 
comentario 

)); 
handleValidated(); 
};

La forma en que se destructura isChecked es tal, que solo se obtienen el primer elemento de la lista:

const [ rubro ] = isChecked;

Ahi solo se tiene isChecked[0], que después se envía en dispatch-> preRegisterAddNew.

Espero que esta respuesta sea de ayuda.

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.