传入状态变量value，而不是react lambda函数中的变量

Question

我有这个react组件:

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

该组件使用react-admin模块

我所要做的就是通过将theFilter传递到List组件的filter道具来添加自定义过滤器。发生的问题是，每当使用DatePicker设置日期时，集合查询将作为c=>c.where('created_stripe', '>=', theDate)传递，而我希望它在此函数中采用theDate的值，如collectionQuery: c=>c.where('created_stripe','>=', 165343454)。

那么我该怎么做呢?

Answer 1

你能用useEffect让代码只运行一次吗?

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