React - 在用户选择一个值后触发一个函数

Question

在用户选择了一个值之后触发函数的最佳方式是什么。例如，用户快速单击数字 10，然后停止，然后触发包含该值的函数。可能类似于控制台日志。 debounce 是正确的方法吗？我在逻辑上遇到了一些问题，非常感谢您的帮助。

在下面的代码中，我可以让addToCart 函数在多次点击后只触发一次，这正是我想要的。但是amount 已经过时了。在代码中，您可以看到amount 可能会发生变化，例如cartAmount 有值时。但是，在去抖动时，它只会将 amount 的值视为 1

这是我的代码

const QuantitySelectorComponent = (props) => {
const {
    cartAmount,
} = props;

const [amount, setAmount] = useState(1);

useEffect(() => {
    if (cartAmount) {
    setAmount(cartAmount); 
    }
}, [cartAmount]);

const increment = useMemo(() => debounce(() => {
    setAmount(amount => amount + 1);
    addToCart(amount)
}, 2000), [addToCart]);

const decrement = useMemo(() => debounce(() => {
    setAmount(amount => amount - 1);
    addToCart(amount)
}, 2000), [addToCart]);


return(
    <StyledQuantityWrapper>
        <StyledQuantityButton disabled={ amount <= 0 } 
            onClick={decrement} >
            &mdash;
        </StyledQuantityButton>
        <StyledQuantityInput onFocus={onFocus} onBlur={onBlur} className="quantity-input__screen" type="number" value={ amount } />
        <StyledQuantityButton disabled={ amount <= 0 } 
            onClick={increment} >
            &#xff0b;
        </StyledQuantityButton>
    </StyledQuantityWrapper>
)

}

导出默认的QuantitySelectorComponent；

Answer 1

问题

我在您的代码中看到的问题是您正在对状态更新进行去抖动，而不是在每次状态更新后对要调用的函数进行去抖动。

建议

您希望消除addToCart 函数的抖动并允许所有正常的 React 状态更新正常发生。为了避免任何陈旧的外壳，请使用依赖于amount 状态的useEffect 挂钩来调用addToCart 的去抖动版本。

例子

const QuantitySelectorComponent = (props) => {
  const firstRender = useRef(true);
  const { cartAmount } = props;

  const [amount, setAmount] = useState(1);

  useEffect(() => {
    if (cartAmount) {
      setAmount(cartAmount);
    }
  }, [cartAmount]);

  const debouncedAddToCart = useMemo(() => debounce(addToCart, 2000), []);

  useEffect(() => {
    if (firstRender.current) {
      // don't call addToCart on the initial render
      firstRender.current = false;
      return;
    }
    debouncedAddToCart(amount);
  }, [amount, debouncedAddToCart]);

  const increment = (value) => () => setAmount((c) => c + value);

  return (
    <div>
      <button disabled={amount <= 0} onClick={increment(-1)}>
        &mdash;
      </button>
      <input
        onFocus={onFocus}
        onBlur={onBlur}
        className="quantity-input__screen"
        type="number"
        value={amount}
        onChange={e => setAmount(Number(e.target.value))}
      />
      <button disabled={amount < 0} onClick={increment(1)}>
        &#xff0b;
      </button>
    </div>
  );
};

Answer 2

您可以使用 useEffect 挂钩来关注状态计数的变化，并在计数为 10 时触发您的函数。

const {useState, useEffect} = React;

function Counter() {
  // Set the initial count state to zero, 0
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    if (count === 10) {
      // fire your function
      console.log('--------', count);
    }
  }, [count]);

  // Create handleIncrement event handler