Recoil 中 selector 为啥拿不到 atom 的最新值?
我在用 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>
);
}
你检查一下应用的最外层有没有用
如果没有 RecoilRoot,Recoil 的状态管理就不会生效,selector 拿到的就会是初始值或者状态混乱。
还有一种情况是你可能在不同的组件树里用了不同的 RecoilRoot,这样各管各的,也会导致状态不同步。
如果已经包裹了 RecoilRoot,那再确认一下 atom 和 selector 确实是定义在组件外部的(不是在函数组件体内部定义),这点你代码里看起来是对的。
基本就是这两个原因,你排查一下 RecoilRoot 的配置。