Question

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

最初，我对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函数使一切变慢

Answer 1

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

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

Answer 2

您可能想要尝试使其仅在useEffect更新时才触发searchBarQuery。即作为setSearchBarQuery上的回调。你可能会这样做；

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

请注意useEffect中的第二个参数，即数组，以使该参数仅在该项更改后才运行。

useEffect使onChange并键入延迟/缓慢

2 个答案: