React自定义usePrevious Hook：值非空时如何保留历史状态

你当前的usePrevious Hook会记录所有状态变化，包括输入框清空时的空值（或null），导致后续输入新值时，上一次状态不是之前的有效数值（比如示例中的3），而是空值。要解决这个问题，只需在Hook中添加判断，仅当传入的value为有效状态时才更新历史记录。

修改后的usePrevious Hook #

import { useEffect, useRef } from 'react';

export const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    // 仅当value不为空、不为null时更新历史状态，可根据业务需求调整判断条件
    if (value != null && value !== '') {
      ref.current = value;
    }
  }, [value]);
  return ref.current;
};

逻辑说明 #

通过if (value != null && value !== '')过滤空值和null，只有当传入的value是有效内容时，才更新ref保存的历史状态。如果你的业务中要求quantity必须是正整数，还可以进一步强化判断，比如：

if (!isNaN(value) && value > 0) {
  ref.current = value;
}

调整后的组件代码 #

import { useState, useEffect } from 'react';
import { usePrevious } from './usePrevious';

export const ArticleQuantity = () => {
  const [quantity, setQuantity] = useState(1);
  const prevQuantity = usePrevious(quantity);

  useEffect(() => {
    // 避免初始渲染时prevQuantity为undefined的情况
    if (prevQuantity !== undefined) {
      console.log(`上一次数量：${prevQuantity}，当前数量：${quantity}`);
    }
  }, [quantity, prevQuantity]);

  return (
    <div>
      <input
        type="number"
        value={quantity}
        onChange={(e) => {
          const val = e.target.value;
          // 空输入时设置为默认值1，也可根据业务需求保留空值（配合Hook判断不更新历史）
          setQuantity(val === '' ? 1 : Number(val));
        }}
      />
    </div>
  );
};

组件优化点 #

• 将input改为受控组件（用value绑定状态），避免状态与输入框内容不一致
• onChange时统一将输入值转为数字，空输入时设置默认值1，保证状态始终为有效数值
• useEffect中增加判断，跳过初始渲染时prevQuantity为undefined的输出

内容的提问来源于stack exchange，提问作者Elodie Muller