React中如何在counter为0时触发useEffect执行？

你不能直接在useEffect的依赖数组里写条件判断（比如counter = 0这种赋值/判断写法都是错误的），正确的做法是：

• 把counter加入依赖数组，让useEffect在counter变化时触发
• 在副作用函数内部添加条件判断，只有当counter === 0时才执行目标逻辑

修正后的代码如下：

// 确保counter是React状态而非普通变量
const [counter, setCounter] = useState(5);

useEffect(() => {
    socket.on("counter", (newCounter) => {
        setCounter(newCounter);
    });
    return () => socket.off('counter');
}, [socket])

useEffect(() => {
    // 仅当counter等于0时执行目标逻辑
    if (counter === 0) {
        // do something
        console.log('counter变为0，执行对应副作用');
    }
}, [counter]) // 依赖数组传入counter，监听其变化

额外注意：

• 原代码第一个useEffect的清理函数中，socket.off('counter', counter)写法可能存在问题，通常off只需传入事件名或对应的回调函数，你可以根据使用的Socket库API调整。
• 必须保证counter是通过useState声明的React状态，普通的let变量无法触发组件重渲染，useEffect也无法感知其变化。

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