React中如何在多个状态更新时同步修改目标状态？

问题场景 #

需要实现：当state1、state2、state3、state4任意一个状态被修改（与初始值不同）时，将isModified设为true；当所有状态回到初始值时，isModified设为false。此前尝试用useEffect实现但未达到预期，代码如下：

const myApp = () => {
    const [state1, setState1] = useState();
    const [state2, setState2] = useState();
    const [state3, setState3] = useState();
    const [state4, setState4] = useState();

    const [isModified, setIsModified] = useState(false);

    useEffect(
        () => {
            console.log("useEffect triggered");
            setIsModified(true);
        },
        [state1, state2, state3, state4]
    )
    useEffect(
        () => {
            console.log("We set isModified to", isModified);
        },
        [isModified]
    )

    // 组件渲染内容...
};

解决方案 #

方案1：用useMemo计算衍生状态（推荐） #

isModified本质是依赖其他状态的衍生值，无需单独存为state，直接通过useMemo对比当前状态与初始值即可，避免副作用带来的问题：

const myApp = () => {
    // 给状态设置明确的初始值
    const [state1, setState1] = useState('');
    const [state2, setState2] = useState('');
    const [state3, setState3] = useState(null);
    const [state4, setState4] = useState(0);

    // 仅在组件挂载时记录初始状态
    const initialStates = useMemo(() => ({
        state1,
        state2,
        state3,
        state4
    }), []);

    // 实时计算是否有状态被修改
    const isModified = useMemo(() => {
        return state1 !== initialStates.state1 ||
               state2 !== initialStates.state2 ||
               state3 !== initialStates.state3 ||
               state4 !== initialStates.state4;
    }, [state1, state2, state3, state4, initialStates]);

    // 验证用的effect
    useEffect(() => {
        console.log("isModified当前值:", isModified);
    }, [isModified]);

    // 组件渲染内容...
};

方案2：封装状态更新函数（需手动控制isModified时使用） #

如果业务需要isModified可手动重置（比如表单重置场景），可以封装所有状态更新函数，在修改目标状态的同时标记isModified：

const myApp = () => {
    const [state1, setState1] = useState('');
    const [state2, setState2] = useState('');
    const [state3, setState3] = useState(null);
    const [state4, setState4] = useState(0);
    const [isModified, setIsModified] = useState(false);

    // 封装更新函数，修改状态的同时标记为已修改
    const updateState1 = (newValue) => {
        setState1(newValue);
        setIsModified(true);
    };

    const updateState2 = (newValue) => {
        setState2(newValue);
        setIsModified(true);
    };

    const updateState3 = (newValue) => {
        setState3(newValue);
        setIsModified(true);
    };

    const updateState4 = (newValue) => {
        setState4(newValue);
        setIsModified(true);
    };

    // 重置修改状态的函数
    const resetModified = () => {
        // 若需要同时重置所有状态，可在这里调用setState1等恢复初始值
        setIsModified(false);
    };

    return (
        <div>
            <input onChange={(e) => updateState1(e.target.value)} value={state1} />
            <input onChange={(e) => updateState2(e.target.value)} value={state2} />
            {/* 其他输入框同理 */}
            <button onClick={resetModified}>重置修改状态</button>
        </div>
    );
};

原代码问题说明 #

原useEffect逻辑仅在目标状态变化时将isModified设为true，但未处理「状态改回初始值」的场景，导致isModified会一直保持true；同时没有对比初始值，无法准确判断是否真的发生了有效修改。

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