如果在函数中也修改了状态，则Debounce不起作用

Question

我一直在实现搜索，因为你键入的功能，并希望有功能search处理我的API调用被揭穿。如果我只在事件处理程序中调用debounced_search函数，则工作良好，但我还需要更新输入值，这应该立即发生。

我的问题是，现在，只要我添加setInput(newInputValue);到事件处理程序，搜索函数不再被揭穿，但在每次更改时立即调用，虽然我使用的是揭穿的版本。

为什么会这样?怎么解呢?

谢谢。

import React from 'react'
import Autocomplete from '@mui/material/Autocomplete';
import { selectClasses, TextField } from '@mui/material';
import debounce from 'lodash/debounce';
function Searchbar() {
const [options, setOptions] = React.useState([]);
const [input, setInput] = React.useState("");
const search = (event, newInputValue) => {
console.log("Debounced Called")
}
const debounced_search = debounce(search, 500)
return (<Autocomplete
id="free-solo"
freeSolo
renderInput={(params) => <TextField {...params} label="Test" />}
inputValue={input}
options={options}
onInputChange={function (event, newInputValue) {
debounced_search(event, newInputValue);
setInput(newInputValue);
console.log("Input Changed")
}}
/>)
}
export default Searchbar

Answer 1

这对您不起作用的原因是每次有状态更改时都会一次又一次地调用函数组件，这意味着每次都重新运行它内部的所有内容，包括对debounce()的调用。为了解决这个问题，React提供了一个useCallback()钩子:

const debounced_search = useCallback(debounce((event, newInputValue) => {
console.log("Debounced Called")
}, 500), [])

请注意，我在这里内联了search函数，因为没有必要在每次渲染时重新创建它。

Answer 2

这是为我工作:

index.js

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

App.js

import React from "react";
import debounce from "@icaruk/debounce";
export default function App() {
const [input, setInput] = React.useState("");
const search = (input) => {
console.log(`Debounced Called with ${input}`);
};
return (
<input
id="free-solo"
value={input}
onChange={function (event) {
const value = event.target.value;
debounce(1000, () => search(value));
setInput(value);
console.log(`Input Changed to ${value}`);
}}
/>
);
}

这是沙盒:https://codesandbox.io/s/blissful-water-gojli?file=/src/App.js

如果你对代码有任何问题，请随时提问，我没有任何评论，但可能有些事情需要解释。