useEffect不遵循依赖数组触发，如何仅在handleInputUpdate调用时运行？

问题根源 #

1. React的useEffect本身在组件首次挂载时必然执行一次，这是框架内置规则，和依赖项内容无关。
2. useEffect的触发逻辑是监听依赖项的值/引用变化，而非监听依赖项是否被调用，你目前的使用方式不符合useEffect的设计逻辑。
3. 你当前定义的handleInputUpdate没有做缓存处理，每次组件重新渲染都会生成新的函数实例，引用会频繁变化，还会导致useEffect出现额外的意外触发。

解决方法 #

你在handleInputUpdate的逻辑中已经设置了trigger: true的状态标识，刚好可以基于这个标识实现需求：

1. 先用useCallback缓存handleInputUpdate，避免函数引用频繁变化：

// 依赖数组按你实际用到的外部变量补充，若仅用到setState可以放空
const handleInputUpdate = useCallback((event) => {
    const eventValue = event.target.value;
    setState(prev => ({ ...prev, answer_text: eventValue, trigger: true }))
}, [])

2. 给useEffect增加挂载状态判断，同时将依赖项替换为trigger状态：

// 用ref存储挂载标识，不会触发重渲染
const isMounted = useRef(false);

useEffect(() => {
    // 首次挂载时仅更新标识，不执行业务逻辑
    if (!isMounted.current) {
        isMounted.current = true;
        return;
    }
    // 仅当trigger为true时执行目标逻辑
    if (state.trigger) {
        console.log(" I am changing for no reason in useeffect")
        // 执行完成后可重置trigger，方便下次调用触发
        setState(prev => ({ ...prev, trigger: false }))
    }
}, [state.trigger])

调整后，useEffect的业务逻辑只会在handleInputUpdate被调用、trigger变为true之后才会执行，符合你的预期。

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