React hooks useState 不随 onChange 更新[重复]

React Hooks 是 React 16.8 引入的一项新功能，它可以让我们在函数组件中使用状态和其他 React 特性，而无需编写类组件。其中最常用的 Hook 是 useState。useState 允许我们在函数组件中添加状态，并且可以通过调用 setState 函数来更新状态。然而，有时我们可能希望状态不会在每次输入改变时立即更新，而是在特定的条件下才进行更新。本文将介绍如何，并提供一个案例代码来解决这个问题。

jsx
import React, { useState, useCallback, useEffect } from 'react';
const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = useCallback((event) => {
    setInputValue(event.target.value);
  }, []);
  useEffect(() => {
    // 在这里可以进行其他逻辑处理
    console.log('Input value:', inputValue);
  }, [inputValue]);
  return (
    
  );
};
export default MyComponent;

jsx
import React, { useState, useCallback, useEffect } from 'react';
const debounce = (callback, delay) => {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback(...args);
    }, delay);
  };
};
const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = useCallback((event) => {
    setInputValue(event.target.value);
  }, []);
  const handleInputChangeDebounced = useCallback(
    debounce(handleInputChange, 500),
    [handleInputChange]
  );
  useEffect(() => {
    // 在这里可以进行其他逻辑处理
    console.log('Input value:', inputValue);
  }, [inputValue]);
  return (
    
  );
};
export default MyComponent;