Question

function Foo() {
  const [state, setState] = useState(0);
  const cb = useCallback(debounce(() => {
    console.log(state);
  }, 1000), []);
  return ...;
}

在此示例中，state在回调中可能会过时。我可以想到的一种解决方法是：

function Foo() {
  const [state, setState] = useState(0);
  const cbHelper = useCallback(debounce((state2) => {
    console.log(state2);
  }, 1000), [])
  const cb = () => cbHelper(state);
  return ...;
}

但是，这看起来很混乱。有没有更干净/更好的方法来做到这一点？

编辑：

我不能仅执行以下操作，因为debounce无法正常工作

useCallback(debounce(() => {
  console.log(state);
}, 1000), [state]);

Answer 1

我用use-debounce来管理

import { useDebouncedCallback } from 'use-debounce';

function Input({ defaultValue }) {
  const [value, setValue] = useState(defaultValue);
  // Debounce callback
  const [debouncedCallback] = useDebouncedCallback(
    // function
    (value) => {
      setValue(value);
    },
    // delay in ms
    1000
  );

  // you should use `e => debouncedCallback(e.target.value)` as react works with synthetic evens
  return (
    <div>
      <input defaultValue={defaultValue} onChange={(e) => debouncedCallback(e.target.value)} />
      <p>Debounced value: {value}</p>
    </div>
  );

}

在反跳回调中使用React钩子状态的干净方法？

1 个答案: