1

estoy realizando un .filter a un objeto para filtrarlo por las fechas, luego le hago un map para acceder al resultado y poder llenar mi state "datosPorCopiar" pero al realizar la acción solo me completa el ultimo elemento recorrido, que puede estar pasando?.

Lo que necesito es que todos los datos mapeados se guarden el el estado datosPorCopiar, si falta alguna información o necesitan alguna foto o algun resultado, por favor comentarme para editar el post con la informacion que necesiten, muchas gracias!

introducir la descripción de la imagen aquí

Aca dejo mi codigo ( es dentro de la funcion copiarDatos)

import React, { useState } from "react";
import { Link } from "react-router-dom";

const TableConsolidado = ({ confirmDelete, data, names, anio, mes }) => {
  const [datosPorCopiar, setDatosPorCopiar] = useState([]);

  const copiarDatos = () => {
    const meses = [
      "diciembre",
      "enero",
      "febrero",
      "marzo",
      "abril",
      "mayo",
      "junio",
      "julio",
      "agosto",
      "septiembre",
      "octubre",
      "noviembre",
    ];
    let mesAnterior;
    let anioNuevo = anio;

    if (mes === "diciembre") {
      // si el caso es diciembre, entonces el anterior es noviembre.
      mesAnterior = "noviembre";
    } else {
      // en cualquier otro caso, el mes anterior es el que se encuentra una posición antes en el arreglo de meses.
      const indiceMesActual = meses.indexOf(mes);
      mesAnterior = meses[indiceMesActual - 1];
    }

    console.log("el mes anterior es: " + mesAnterior);
    console.log("año actual es : " + anio);

    if (mesAnterior === "diciembre") {
      anioNuevo = anio - 1;
      console.log("anio nuevo restado es:" + anioNuevo);
    }

    data
      .filter((dat) => dat.mes === mesAnterior && dat.anio === anioNuevo) 
      
      .map((dat) => (
        setDatosPorCopiar([...datosPorCopiar, dat])
      )); // guarda los datos filtrados en el state datosPorCopiar









      
  };

  return (
    <>
      <hr />
      <div className="container">
        <div className="row">
          <div className="col">
            <div className="d-grid gap-2">
              <Link
                to="/createconsolidado"
                state={{ names: names, anio: anio, mes: mes }}
                className="btn btn-secondary mt-2 mb-2"
              >
                CREATE
              </Link>
            </div>

            <table className="table table-dark table-hover">
              <thead>
                <tr>
                  <th>CUARTO</th>
                  <th>DNI</th>
                  <th>NOMBRES</th>
                  <th>APELLIDOS</th>
                  <th>TELEFONO</th>
                  <th>PRECIO</th>
                  <th>MONTO PAGADO</th>
                  <th>NOTAS</th>
                  <th>ACCION</th>
                </tr>
              </thead>
              <tbody>
                {data
                  .filter((dat) => dat.mes === mes && dat.anio === anio)
                  .map((dat) => (
                    <tr key={dat.id}>
                      <td>{dat.roomName}</td>
                      <td>{dat.dni}</td>
                      <td>{dat.name}</td>
                      <td>{dat.lastName}</td>
                      <td>{dat.phone}</td>
                      <td>{dat.price}</td>
                      <td>{dat.montoPagado}</td>
                      <td>{dat.notas}</td>
                      <td>
                        <Link
                          to={`/edit/${dat.id}`}
                          state={{ names: names }}
                          className="btn btn-light"
                        >
                          <i className="fa-solid fa-pencil"></i>
                        </Link>
                        <button
                          onClick={() => {
                            confirmDelete(dat.id);
                          }}
                          className="btn btn-danger"
                        >
                          <i className="fa-solid fa-trash"></i>
                        </button>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>

            <button onClick={() => copiarDatos()}>Test</button>
          </div>
        </div>
      </div>
    </>
  );
};

export default TableConsolidado;
2
  • Creo que esto no hace lo que crees que está haciendo: setDatosPorCopiar([...datosPorCopiar, dat]). Una pregunta: Qué crees que hace esa línea de código?
    – Arriel
    el 12 ene. a las 20:40
  • crea un array nuevo con el contenido que tiene datosPorCopiar y ademas de los datos que tiene dat
    – Victor
    el 12 ene. a las 20:51

1 respuesta 1

1

Lo solucione agregando lo siguiente :

data
  .filter((dat) => dat.mes === mesAnterior && dat.anio === anioNuevo)
  .map((da) =>
    setDatosPorCopiar((prevState) => [
      ...prevState,
      {
        anio: da.anio,
        dni: da.dni,
        id: da.id,
        lastName: da.lastName,
        mes: da.mes,
        montoPagado: da.montoPagado,
        name: da.name,
        notas: da.notas,
        phone: da.phone,
        price: da.price,
        roomName: da.roomName,
      },
    ])
  );

Faltaba agregar el nuevo valor como objeto junto con los parametros y los valores, ejemplo: anio: da.anio lo que hace es que al parametro anio le da el valor que tienes en el objeto da.anio

1
  • ¡No olvides editar y explicar cómo funciona el código! Tal vez para vos sea claro, pero para otros que lleguen a tener un problema similar, no. Lee Cómo responder.
    – padaleiana
    el 13 ene. a las 12:12

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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