useEffect 使 onChange 和输入延迟/缓慢

Question

我正在创建一个网站，用户可以在其中在搜索栏中键入他要查找的内容。

最初，我onChange对用户搜索后面的一个字符这一事实有疑问。例如，如果用户搜索“banana”，则搜索结果为“banan”。我知道问题来自于setState异步的事实。 onChange 是延迟的一个字符 - Hooks

为了避免这个问题，我useEffect在我的代码中引入了这个组件。有用。 但是现在，如果用户键入一些词，他键入的词不会立即显示在搜索栏中。它们会在几分钟后显示，就好像用户输入的内容和显示的内容之间存在延迟。

我的搜索栏组件

export default function SearchBar({handlerSearchBar}) {
    const classes = useStyles();
    const [searchBarQuery, setSearchBarQuery] = React.useState([""])


    function handleChange(event) {
        setSearchBarQuery(event.target.value);
        console.log(searchBarQuery)
    }

    useEffect(() => {
        console.log("Search message inside useEffect: ", searchBarQuery);
        handlerSearchBar(searchBarQuery)
    });

    return (
        <form className={classes.container} noValidate autoComplete="off">
            <TextField
                required
                id="standard-full-width"
                label="Searchbar"
                style={{ marginLeft: 40, marginRight: 40 }}
                placeholder="Write your query"
                // helperText="The results will appear below!"
                fullWidth
                margin="normal"
                InputLabelProps={{
                    shrink: true,

                }}
                onChange={handleChange}
            />
        </form>
    );
}

handlerSearchBar 函数

它是一个函数，它将结果从我的搜索栏组件传递给它的父组件，然后再传递给它的祖父组件 ( SearchForm)。

祖父母SearchForm正在将其状态之一设置为通过搜索栏handlerSearchBar功能传递的内容：

function SearchForm() {
    const [searchBarQueryParent, setSearchBarQueryParent] = React.useState([""])

    function handlerSearchBar(searchBarQuery) {
        setSearchBarQueryParent(searchBarQuery)
        console.log(searchBarQuery)
    }
    return (something)
}

我的问题是：为什么搜索词的显示比实际输入延迟这么多？

我认为正在发生的事情是useEffect每次击键都会调用它，这就是它如此缓慢的原因。我试图打电话useEffect，onSubmit但没有任何改善。

或者是我的handlerSearchBar功能让一切变慢

Answer 1

我通过从 更改为 解决了这个onChange问题onBlur。

我不完全确定为什么这个改变有效，但它确实有效。