react antd 远程模糊搜索和防抖

import React, { useState, useEffect, } from “react”;
import ‘./newFiltering.less’
import { Form, Input, Button, Select, message } from ‘antd’;
import { sysRuleList } from ‘…/service’
import { debounce } from “lodash”;
const { Option } = Select;

function NewFiltering (props) {
const [form] = Form.useForm();
const [ruleValue, setRuleValue] = useState();
const [data, setData] = useState()

// 获取强制过滤规则
const getRule = async (val) => {
let res = await sysRuleList({ search: val })
if (res && res.res) {
setData(res.data.data)
}
}

// 应用规则防抖500毫秒请求一次
const handleChange = debounce(val => {
setRuleValue(val)
}, 500)

// 应用规则防抖500毫秒请求一次
const handleSearch = debounce(value => {
if (value) {
getRule(value)
};
}, 500)

useEffect(() => {
getRule()
}, [])

return (

{data && data.map((item) => {item.name} )}

)

}

export default NewFiltering;