如何在useState更新后执行指定逻辑（非全局监听state变化）

请看以下代码：

const App = () => {
    const [errorMsgs, setErrorMsgs] = useState([])
    const onButtonPressed = () => {
        fetchErrors(setErrorMsgs)
        if (!errorMsgs.length) {
            // Proceed and do somethings
        }
    }
}

function fetchErrors(setErrorMsgs) {
// if some condition is true:
setErrorMsgs(errorMsgs => [...errorMsgs, "some error"])
// if some other condition is true:
setErrorMsgs(errorMsgs => [...errorMsgs, "some other error"])
}

问题在于：调用fetchErrors后检查errorMsgs是否为空时，即使fetchErrors添加了错误，条件仍会判定为true。这是因为React的setErrorMsgs是异步更新状态，不会立即修改当前的errorMsgs变量，且它不返回Promise，无法用await或.then()等待更新完成。需要实现状态更新后再执行后续逻辑，但不希望每次errorMsgs变化都触发该逻辑。

方法1：让fetchErrors返回错误数组，统一处理状态更新和判断 #

修改fetchErrors，使其先收集所有错误再返回，这样可以在点击事件中直接拿到结果，判断是否有错误后再更新状态：

const App = () => {
    const [errorMsgs, setErrorMsgs] = useState([])
    const onButtonPressed = () => {
        const newErrors = fetchErrors();
        if (newErrors.length > 0) {
            setErrorMsgs(prev => [...prev, ...newErrors]);
        } else {
            // 执行后续逻辑
        }
    }
}

function fetchErrors() {
    const errors = [];
    // 条件判断，收集错误
    if (/* 某个条件 */) {
        errors.push("some error");
    }
    if (/* 另一个条件 */) {
        errors.push("some other error");
    }
    return errors;
}

方法2：在fetchErrors中计算错误并返回是否存在错误 #

如果必须保留fetchErrors接收setErrorMsgs的写法，可以在函数内部收集错误，一次性更新状态的同时返回是否有错误：

const App = () => {
    const [errorMsgs, setErrorMsgs] = useState([])
    const onButtonPressed = () => {
        const hasErrors = fetchErrors(setErrorMsgs);
        if (!hasErrors) {
            // 执行后续逻辑
        }
    }
}

function fetchErrors(setErrorMsgs) {
    const errors = [];
    // 条件判断，收集错误
    if (/* 某个条件 */) {
        errors.push("some error");
    }
    if (/* 另一个条件 */) {
        errors.push("some other error");
    }
    
    if (errors.length > 0) {
        setErrorMsgs(prev => [...prev, ...errors]);
        return true;
    }
    return false;
}

方法3：传递当前状态给fetchErrors，计算最终状态并判断 #

如果fetchErrors的逻辑依赖当前的errorMsgs状态，可以将当前状态传入，计算出最终的错误数组，同时判断是否新增了错误：

const App = () => {
    const [errorMsgs, setErrorMsgs] = useState([])
    const onButtonPressed = () => {
        const { updatedErrors, hasNewErrors } = fetchErrors(errorMsgs);
        setErrorMsgs(updatedErrors);
        if (!hasNewErrors) {
            // 执行后续逻辑
        }
    }
}

function fetchErrors(currentErrors) {
    const updatedErrors = [...currentErrors];
    // 条件判断，添加错误
    if (/* 某个条件 */) {
        updatedErrors.push("some error");
    }
    if (/* 另一个条件 */) {
        updatedErrors.push("some other error");
    }
    
    return {
        updatedErrors,
        hasNewErrors: updatedErrors.length > currentErrors.length
    };
}

核心原理 #

React的状态更新是异步批量处理的，调用setState后，当前作用域中的状态变量不会立即更新。通过在更新状态前先计算好错误结果，就能在同一个事件流中直接判断是否需要执行后续逻辑，无需等待状态更新完成。

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