Tengo este componente de reacción:
export const ClientChannelsList = (props) => { const [theDate, setTheDate] = useState(null); const [theFilter, setTheFilter] = useState({ collectionQuery: c => c.where('created_stripe', '>=', 1611700523) }); function handleDateChanged(date) { setTheDate(date.getTime()/1000); setTheFilter({ collectionQuery: c => c.where('created_stripe', '>=', theDate) }); } return ( <List exporter={exporter} filter={theFilter} {...props} filters={filters} actions={<TheActions/>}> <> <Datagrid> <TextField label="Channel Id" source="ChannelId"/> <TextField label="Name" source="Name"/> <TextField label="Email" source="EmailAddress"/> <TextField label="Subscription Status" source="SubscriptionStatus"/> <TextField label="Has Subscription" source="HasSubscription"/> <TextField label="Host Channel Id" source="HostChannelId"/> <TextField source="HostChannelName"/> <DeleteButton label="" redirect={false}/> </Datagrid> <DatePicker selected={theDate*1000} onChange={(date) => handleDateChanged(date)}/> </> </List> ) };Este componente usa el módulo react-admin
Todo lo que estoy tratando de hacer es agregar un filtro personalizado pasando el theFilter al elemento de filter del componente List . El problema que sucede es que cada vez que se establece una fecha con DatePicker, la consulta de la colección se transmite como c=>c.where('created_stripe', '>=', theDate) , mientras que me gustaría que tomara el valor de theDate en esta función algo así como collectionQuery: c=>c.where('created_stripe','>=', 165343454) .
Entonces, ¿cómo debo hacerlo?
¿Puedes usar useEffect para que ese código se ejecute solo una vez?
export const ClientChannelsList = (props) => { const [theDate, setTheDate] = useState(null); useEffect(() => { const [theFilter, setTheFilter] = useState({ collectionQuery: c => c.where('created_stripe', '>=', 1611700523) }); }) function handleDateChanged(date) { setTheDate(date.getTime()/1000); setTheFilter({ collectionQuery: c => c.where('created_stripe', '>=', theDate) }); } return ( <List exporter={exporter} filter={theFilter} {...props} filters={filters} actions={<TheActions/>}> <> <Datagrid> <TextField label="Channel Id" source="ChannelId"/> <TextField label="Name" source="Name"/> <TextField label="Email" source="EmailAddress"/> <TextField label="Subscription Status" source="SubscriptionStatus"/> <TextField label="Has Subscription" source="HasSubscription"/> <TextField label="Host Channel Id" source="HostChannelId"/> <TextField source="HostChannelName"/> <DeleteButton label="" redirect={false}/> </Datagrid> <DatePicker selected={theDate*1000} onChange={(date) => handleDateChanged(date)}/> </> </List> ) };