React中是否应使用useCallback封装重复的错误处理逻辑？

我有如下这段onChange事件处理代码：

// This is onChange event
function nameChangeHandler(e, field = 'Name') {
        const currentName = e.target.value;

        if (currentName.length >= 10) {
            if (!errors.some((x) => x.field == field)) {
                setErrors((state) => [
                    ...state,
                    {
                        field,
                        errorMessage:
                            field +
                            ' should be between 3 and 10 characters long',
                    },
                ]);
            }
        } else if (currentName.length <= 3) {
            if (!errors.some((x) => x.field == field)) {
                setErrors((state) => [
                    ...state,
                    {
                        field,
                        errorMessage:
                            field +
                            ' should be between 3 and 10 characters long',
                    },
                ]);
            }
        } else {
            setErrors((state) => state.filter((x) => x.field !== field));
        }
    }

其中这段代码存在重复：

if (!errors.some((x) => x.field == field)) {
                setErrors((state) => [
                    ...state,
                    {
                        field,
                        errorMessage:
                            field +
                            ' should be between 3 and 10 characters long',
                    },
                ]);
            }

我将这段重复逻辑封装到useCallback钩子中，重构后的代码如下，且代码能正常运行，但作为React新手，不确定这是否属于最佳实践：

const errorSetter = useCallback((field) => {
        if (!errors.some((x) => x.field == field)) {
            setErrors((state) => [
                ...state,
                {
                    field,
                    errorMessage:
                        field + ' should be between 3 and 10 characters long',
                },
            ]);
        }
    }, []);

function nameChangeHandler(e, field = 'Name') {
        const currentName = e.target.value;

        if (currentName.length >= 10) {
            errorSetter(field)
        } else if (currentName.length <= 3) {
            errorSetter(field)
        } else {
            setErrors((state) => state.filter((x) => x.field !== field));
        }
    }

分析与结论 #

首先，封装重复逻辑本身是非常好的做法——它让代码更简洁、易读，后续修改错误提示或判断规则时只需改动一处，完全符合React开发的最佳实践。不过你的当前实现存在一个潜在坑点：

你给useCallback的依赖数组是空的，但函数内部用到了errors状态。这会导致errorSetter捕获的是组件首次渲染时的errors值，后续errors更新后，errorSetter里的errors仍是旧数组，可能出现判断错误（比如明明已添加过该字段的错误，却因旧数组判断重复添加）。

正确的优化方式有两种： #

1. 将errors加入依赖数组
   每次errors变化时，errorSetter会重新创建，确保使用最新状态：

const errorSetter = useCallback((field) => {
        if (!errors.some((x) => x.field == field)) {
            setErrors((state) => [
                ...state,
                {
                    field,
                    errorMessage:
                        field + ' should be between 3 and 10 characters long',
                },
            ]);
        }
    }, [errors]);

2. 利用setErrors的函数式更新
   把判断逻辑移到状态更新函数内部，直接使用React传入的前一次状态prevState，无需依赖外部errors，useCallback的依赖数组可保持为空，避免频繁创建函数：

const errorSetter = useCallback((field) => {
        setErrors((prevState) => {
            if (!prevState.some(x => x.field === field)) {
                return [...prevState, {
                    field,
                    errorMessage: `${field} should be between 3 and 10 characters long`
                }];
            }
            return prevState; // 无需更新时返回原状态
        });
    }, []);

额外小优化 #

你还可以合并长度判断逻辑，让nameChangeHandler更简洁：

function nameChangeHandler(e, field = 'Name') {
    const currentName = e.target.value;
    const isInvalid = currentName.length >= 10 || currentName.length <= 3;
    
    if (isInvalid) {
        errorSetter(field);
    } else {
        setErrors(state => state.filter(x => x.field !== field));
    }
}

总结：

• 封装重复逻辑是值得肯定的最佳实践；
• 务必注意useCallback的依赖数组正确性，避免闭包捕获旧状态的问题；
• 结合状态的函数式更新能让封装更健壮、高效。

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