React Hook input debounce 获取event（Cannot read properties of null (reading ‘value‘) ）

叫我虫虫吧

于 2021-11-08 11:25:14 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： react 问题记录文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_40319394/article/details/121204327

react 问题记录专栏收录该内容

14 篇文章

订阅专栏

博客探讨了在React中如何利用useCallback优化lodash的debounce函数，以确保在输入组件onChange事件中，debounce功能能与之同步执行，避免函数在组件重新渲染时频繁创建，提高性能。通过示例代码展示了如何实现这一优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制台报错：Cannot read properties of null (reading 'value')

useCallback记住你的 debounce 函数，所以它不会在组件重新渲染时一次又一次地重新创建。如果没有useCallback，抖动功能将不会与onChange同步执行

不多说，解决方法如下

import {useCallback} from 'react';
import debounce from 'lodash/debounce';
import axios from 'axios';

function Input() {
    const [value, setValue] = useState('');

    const debounceFn = useCallback(debounce(handleDebounceFn, 1000), []);

    function handleDebounceFn(inputValue) {
        console.log(inputValue)
        axios.post(...);
    }


    function handleChange (event) {
        setValue(event.target.value);
        debounceFn(event.target.value);
    };

    return <input value={value} onChange={handleChange} />
}