我有多个标签,每个标签上都有一个表格。 我已经获取了要通过API填充到表格上的数据。 我只使用一个端点,而对其他表使用过滤器。
但是我在搜索功能上遇到了问题。 我需要搜索数据取决于当前处于活动状态的标签。
我正在此项目上使用AntD组件
这是我的代码
let data = []; // Global variable for search function
let setTimeoutId = -1;
const RequestTabs = () => {
const [isAll, setIsAll] = useState(data); //All Tab
const [isResolved, setIsResolved] = useState(data); //Resolved Today tab
const [state, setState] = useState({
loading: true,
activeKey: 'all',
searchItem: '',
});
const fetchAll = async () => {
try {
data = await TriggerRequestAPI.getAll();
setState({
...state,
loading: false,
...params,
});
setIsAll(data);
} catch (err) {
console.log(err);
}
};
const fetchIsResolved = async () => {
try {
data = await TriggerRequestAPI.getAll();
const resolved = data.filter(item => item.status == 'Resolved');
setState({
...state,
loading: false,
});
setIsResolved(resolved);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
fetchAll();
fetchIsResolved();
}, [setState]);
const changeTab = key => {
setState({
...state,
activeKey: key,
loading: false,
});
};
const onSearch = e => {
const value = e.target.value;
clearTimeout(setTimeoutId);
setTimeoutId = setTimeout(() => {
if (value) {
const filteredData = data.filter(row => {
return Object.values(row)
.join(' ')
.toLowerCase()
.includes(value.toLowerCase());
});
setIsAll(filteredData);
}
}, 200);
};
}