Я работаю над функциональным компонентом, у которого обратный вызов (confirm
) зависит от состояния searchForm
. Поскольку setSearchForm
является асинхронным, я использую useRef<Function>
, чтобы сохранить ссылку, и, похоже, это работает, это правильный путь? И как лучше всего с этим справиться?
function DataTable() {
const [searchForm, setSearchForm] = useState<{ [key: string]: string }>({});
const [dataSource, setDataSource] = useState<any>(null);
const confirmRef = useRef<Function>();
const columns = [{
title: 'Name',
dataIndex: 'name',
handleSearch: function(selectedKeys: any[], confirm: Function) {
setSearchForm(prev => {
let current = Object.assign({}, prev);
current['prop'] = val;
return current;
});
// confirm will trigger onChange event
confirmRef.current = confirm;
}
}];
function fetchData() {
axios.post(url, resp => {
setDataSource(resp.data);
});
}
useEffect(() => {
if (confirmRef.current) {
confirmRef.current.call(null);
}
}, [searchForm]);
return <Table columns={columns} dataSource={dataSource} onChange={
() => fetchData();
}/>;
}
И вот еще одно решение:
function DataTable() {
const [searchForm, setSearchForm] = useState<{ [key: string]: string }>({});
const [dataSource, setDataSource] = useState<any>(null);
const [confirmFunction, setConfirmFunction] = useRef<Function | null>(null);
const columns = [{
title: 'Name',
dataIndex: 'name',
handleSearch: function(selectedKeys: any[], confirm: Function) {
setSearchForm(prev => {
let current = Object.assign({}, prev);
current['prop'] = val;
return current;
});
setConfirmFunction(confirm);
}
}];
function fetchData() {
axios.post(url, resp => {
setDataSource(resp.data);
});
}
useEffect(() => {
if (confirmFunction) {
confirmFunction();
}
}, [confirmFunction]);
return <Table columns={columns} dataSource={dataSource} onChange={
() => fetchData();
}/>;
}
Это правильно?