Recoil 中 selector 为啥拿不到 atom 的最新值?

长孙景苑 阅读 2

我在用 Recoil 做一个简单的计数器,想通过 selector 计算双倍值,但发现 selector 里拿到的 count 总是初始值 0,即使我点按钮更新了 atom。

我试过把 selector 放到组件外面,也确认 atom 更新后组件重新渲染了,但 selector 返回的还是旧值,是不是哪里写错了?

const countState = atom({ key: 'count', default: 0 });
const doubleCount = selector({
  key: 'doubleCount',
  get: ({ get }) => {
    const count = get(countState);
    return count * 2;
  }
});

function Counter() {
  const count = useRecoilValue(countState);
  const double = useRecoilValue(doubleCount);
  const setCount = useSetRecoilState(countState);

  return (
    <div>
      {count} / {double}
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}
我来解答 赞 0 收藏
二维码
手机扫码查看
1 条解答
皓轩的笔记
问题应该出在 RecoilRoot 上。你这段代码本身写得没问题,atom 和 selector 的定义、组件里的用法都是正确的。

你检查一下应用的最外层有没有用 包裹?Recoil 必须这样用才能正常工作:

function App() {
return (
<RecoilRoot>
<Counter />
</RecoilRoot>
);
}


如果没有 RecoilRoot,Recoil 的状态管理就不会生效,selector 拿到的就会是初始值或者状态混乱。

还有一种情况是你可能在不同的组件树里用了不同的 RecoilRoot,这样各管各的,也会导致状态不同步。

如果已经包裹了 RecoilRoot,那再确认一下 atom 和 selector 确实是定义在组件外部的(不是在函数组件体内部定义),这点你代码里看起来是对的。

基本就是这两个原因,你排查一下 RecoilRoot 的配置。
点赞
2026-03-19 21:31