Recoil Effect表现异常：仅在计数器递减时触发的问题求助

你的问题根源在于Effect里的setSelf(newCounter - 1)逻辑，它会在每次状态变更后无条件修改atom的值，导致递增和递减操作出现不同的表现：

为什么只有递减时触发Effect？ #

• 递增操作场景：假设当前计数器值为n，点击递增按钮后，状态变为n+1，触发onSet回调。但紧接着setSelf(newCounter -1)会把状态改回n——相当于递增操作被直接抵消。这个回滚操作是同步发生的，可能导致你误以为Effect没触发（实际上第一次onSet已经执行，但状态瞬间回到原值，计数器无变化，日志也可能被忽略）。
• 递减操作场景：当前计数器值为n，点击递减按钮后状态变为n-1，onSet触发后调用setSelf(newCounter -1)将状态改为n-2，这是一个持续变化的新值，不会回滚到之前的状态，所以每次递减都会触发Effect，你能清晰看到日志和计数器变化。

修复方案 #

根据你的需求，有两种常见的处理方式：

1. 仅保留日志（移除状态修改）

如果你只是想测试Effect的触发机制，不需要在Effect里修改状态，直接移除setSelf调用即可：

export const counterState = new atom({
    key: 'counter',
    default: 0,
    effects: [({onSet}) => {
        onSet((newCounter, oldCounter) => {
            console.log(`The new counter is ${newCounter}, the old one is ${oldCounter}`);
        });
    }]
});

2. 避免无限循环的状态修改

如果你确实需要在Effect里修改状态，需要添加标记区分外部更新和Effect内部的更新，防止无限循环：

export const counterState = new atom({
    key: 'counter',
    default: 0,
    effects: [({onSet, setSelf}) => {
        let isInternalUpdate = false;
        onSet((newCounter, oldCounter) => {
            // 跳过内部更新触发的回调
            if (isInternalUpdate) {
                isInternalUpdate = false;
                return;
            }
            console.log(`The new counter is ${newCounter}, the old one is ${oldCounter}`);
            // 标记即将进行内部更新
            isInternalUpdate = true;
            setSelf(newCounter - 1);
        });
    }]
});

这样修改后，递增和递减操作都会触发Effect的日志输出，同时不会出现无限循环或状态回滚的问题。

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