在React中正确的搜索方式与debounce

Question

我在lodash中使用debounce搜索有问题。我使用React, Material Ui和formik。

里写着TypeError: Expected a function

const debounceLoadData = useCallback( debounce(dispatch(getPersons(10, 1, filter)), 1000), [] );

const [filter, setFilter] = useState("");
const debounceLoadData = useCallback(
debounce(dispatch(getPersons(10, 1, filter)), 1000),
[]
);
const onSearchVoter = (value) => {
setFilter(value);
debounceLoadData(value);
};
<Autocomplete
value={values.voter_id}
options={persons ? persons : []}
getOptionSelected={(option, value) => option === value}
getOptionLabel={(person) =>
person
? [person?.fname, person?.mname, person?.lname].filter(Boolean).join(" ")
: ""
}
onChange={(e, value) => {
setFieldValue("voter_id", value ? value : "");
}}
onInputChange={async (event, value) => {
onSearchVoter(value);
}}
renderInput={(params) => (
<TextField
{...params}
name="voter_id"
label="Voter"
variant="outlined"
onBlur={handleBlur}
helperText={touched.voter_id ? errors.voter_id : ""}
error={touched.voter_id && Boolean(errors.voter_id)}
fullWidth
/>
)}
/>;

Answer 1

_.debounce()函数期望得到另一个函数，而不是调用dispatch的结果。您应该将调度调用包装在一个箭头函数中，并通过参数value传递过滤器值，而不是作为依赖项。另外，添加getPerson和dispatch作为useCallback的依赖项。

注意:getPerson函数也应该记下来(通过useMemo或useCallback)。

const [filter, setFilter] = useState('');
const debounceLoadData = useCallback(
debounce(value => dispatch(getPersons(10, 1, value)), 1000),
[getPersons, dispatch]
);

Answer 2

我不认为useCallback在debounce情况下有用。相反，使用useMemo为dispatch创建一个固定的实例(使用固定/可变的输入参数)。

const debouceLoadData = useMemo(() => {
return debounce(f => {
dispatch(getPersons(10, 1, f))
}, 1000)
}, [dispatch])

现在你甚至可以做debounceLoadData(f)如果你想。

注意:useCallback不起作用的原因是，实际上你想要setState(v),v是一个变量。而且，在构造解绑定时，也不希望调用dispatch或getPersons。您只需要构造实例，例如() => {}，这是useMemo所涵盖的。

这是一个微妙之处。但你可以先试试useCallback。