0

Tengo un componente en react que se encarga de realizar un fetch que sera mostrado en cards dentro del componente, tengo definida la estructura de la respuesta para la petición de dentro del estado, pero al momento de actualizar el estado con la respuesta se crea un bucle infinito de peticiones.

export class Datepicker extends Component {

   constructor(props) {
       super(props)
       this.state = {
           startDate: "",
           endDate: "",
           focusedInput: "",
           movimientos: {}
       }


   }

   filtrarDatos(startDateString, endDateString) {

       if (startDateString !== '' && endDateString !== '') {


           const empresa = {
               FECHA_INICIAL: startDateString,
               FECHA_FINAL: endDateString
           };

           const options = {
               method: 'POST',
               headers: { 'Content-Type': 'application/json' },
               body: JSON.stringify(empresa)

           }

           fetch('http://localhost:4000/api/movimiento/filtrarfecha', options
           ).then((res) => res.json())
               .then((data) => {
                   const { movimientos } = data
                   console.log({ movimientos })
                   this.setState({ movimientos })
               })
               .catch((err) => console.log(err))
       }


   }





   render() {
       const endDateString = this.state.endDate && this.state.endDate.format('YYYY-MM-DD') + "T13:47:14.985+00:00";
       const startDateString = this.state.startDate && this.state.startDate.format('YYYY-MM-DD') + "T13:47:14.985+00:00";

       return (
           <div className="DatePicker">
               <DateRangePicker
                   startDate={this.state.startDate} // momentPropTypes.momentObj or null,
                   endDate={this.state.endDate} // momentPropTypes.momentObj or null,
                   onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
                   focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
                   onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
                   endDatePlaceholderText={"Fecha inicial"}
                   startDatePlaceholderText={"Fecha final"}
                   displayFormat={"DD/MM/YYYY"}
                   numberOfMonths={1}
                   isOutsideRange={() => false}
                   showClearDates={true}
               />
               {this.filtrarDatos(startDateString, endDateString)}
           </div>
       )
   }
}

Para ser mas claro el error está en la siguiente parte del código, si comento la actualización del estado el programa funciona correctamente y solo realiza una petición. Soy nuevo en react y no logro entender que es lo que está pasado.

 .then((data) => {
          const { movimientos } = data
          console.log({ movimientos })
          this.setState({ movimientos })
  })

introducir la descripción de la imagen aquí

1 respuesta 1

2

Veo algunos problemas con tu código. Has puesto en el render {this.filtrarDatos(startDateString, endDateString)}. No deberías ejecutar la lógica de esa manera va totalmente en contra de la naturaleza de React, te explico por qué.

Estás llamando a una función que no devuelve nada, simplemente ejecuta tu código cada vez que se ejecuta el método render, por lo tanto cuando carga por primera se llama correctamente y setea el estado con los datos. Esto provoca que haya un nuevo renderizado del componente y por lo tanto la función se vuelve a llamar, y así una y otra vez.

Para solucionar haría los siguiente:

Lo primero elimina la linea que hemos comentado del render, vamos a buscar un lugar mejor para ejecutar esa función. {this.filtrarDatos(startDateString, endDateString)}

Si lo que quiero es llamar una vez cuando el componente se monta:

componentDidMount() {
  this.filtrarDatos(...) // Y aquí pones la lógica de la llamada.
}

Si necesitas datos del usuario como parece ser el caso, y quieres esperar a que el usuario haya elegido ambas fechas, podrías hacer lo siguiente:

En el lugar de la línea de código que hemos eliminado, añade un botón:

<button onClick={this.handleFitrarDatos}>Filtrar Datos</button>

y añade el metodo:

...
handleFiltrarDatos = () => {
  const { startDate, endDate } = this.state;

  if (startDate && endDate) {
    this.filtrarDatos(startDate, endDate);
  }
}
...

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.