javascript - useEffect使onChange并键入延迟/缓慢

我正在创建一个网站，用户可以在其中输入搜索栏。

最初，我对onChange是用户搜索后面的一个字符的事实有疑问。例如，如果用户搜索“香蕉”，则搜索为“香蕉”。
我了解到问题出在setState是异步的。
onChange is one character on delay - 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函数使一切变慢

最佳答案

我通过从onChange更改为onBlur来解决它。

我不完全确定更改为何有效，但确实有效，

关于javascript - useEffect使onChange并键入延迟/缓慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58903243/