import { useState, useEffect, useCallback } from 'react';
|
import { debounce } from 'lodash';
|
import request from '@/utils/request';
|
|
const useCoolHook = (url, label) => {
|
const [options, setOptions] = useState([]);
|
const [inputValue, setInputValue] = useState('');
|
|
const fetchData = async (condition) => {
|
try {
|
const res = await request.post(url, {
|
condition: condition,
|
pageSize: 20
|
}).catch(error => {
|
console.error(error.message);
|
});
|
const { code, msg, data: { records } } = res.data;
|
if (code === 200) {
|
setOptions(records.map(item => ({
|
label: item[label],
|
id: item.id
|
})))
|
} else {
|
console.error(msg);
|
setOptions([]);
|
}
|
} catch (error) {
|
console.error(error.message);
|
setOptions([]);
|
}
|
}
|
|
const debouncedFetch = useCallback(debounce(fetchData, 300), [url]);
|
|
useEffect(() => {
|
// console.log(inputValue, url)
|
// if (inputValue) {
|
// debouncedFetch(inputValue);
|
// } else {
|
// setOptions([]);
|
// }
|
debouncedFetch(inputValue);
|
}, [inputValue, debouncedFetch]);
|
|
const resetInput = () => setInputValue('');
|
|
return {
|
options,
|
setInputValue,
|
resetInput,
|
};
|
}
|
|
export default useCoolHook;
|