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 })
})