Creé un filtro de fecha para mi tabla que, si existe una fecha, muestra esos datos, solo muestra todos los datos. Muestra todos los datos solo aunque ingresé la fecha en que no funcionó. Realmente necesito la ayuda de esta comunidad para esto. Me siento agotado trabajando en esto. por favor, guíame y daré mi enlace de sandbox: https://codesandbox.io/s/musing-mendel-w4n6g
Hola (Vanakkam) Karthikeyan,
Gracias por compartir el enlace de codesandbox.
El método de ciclo de vida 'componentDidMount' no se llama cada vez que rsuite daterangepicker activa onChange, según mi observación. La documentación de ReactJSaquí proporciona más detalles sobre cuándo se activa el método, cuándo es apropiado usarlo, etc.
Si es aceptable filtrar los datos dentro del método handleChange 'asincrónico', el filtrado funciona.
Aquí hay una posible implementación:
async handleChange(dates) { const dtfmt = "yyyy-MM-DDTHH:mm:ss"; const data = await (await fetch("/data.json")).json(); dates && dates.length > 0 ? (data || []).length && this.setState({ startDate: dates[0], // redundant endDate: dates[1], // redundant datefilter: data.filter( d => moment(d.Date, dtfmt).isBetween( moment(dates[0], dtfmt), moment(dates[1], dtfmt) ) ) }) : (data || []).length && this.setState({ startDate: '', endDate: '', datefilter: data }); };Editó la solución anterior para manejar fechas 'vacías'.
Y, así es como filtró las fechas:
Captura de pantalla de codesandbox
Si es obligatorio colocar la carga de datos en los métodos del ciclo de vida, es posible que desee declarar un método 'asincrónico' separado y luego llamarlo desde los métodos de ciclo de vida relevantes (¿puede ser como componentDidUpdate ?).
