React / Recoil - setAtom 新值何时可用？

Question

我试图了解 React Recoil 以及更新后的原子值何时可用，或者如何使新值在应用程序中垂直和水平传播。

例如，如果我有一个名为 的原子userState，并且我更新了它的属性之一avatar_url，例如 ，那么如果我在 setUser 之后立即对其进行控制台，则该值不是新值。

const [user, setUser] = useRecoilState(userState);

setUser({ avatar_url: imageURL, ...appUser});

console.log(imageURL); // is the actual new URL
console.log(user.avatar_url); // should be new URL but isn't

Answer 1

它与 Recoil 无关，但与 React 相关，更新的值可在下一个渲染中使用，因为setState（Recoil 是基于它构建的）是异步的。

setState()不会立即变异this.state，而是创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。不保证调用的同步操作，setState并且可以对调用进行批处理以提高性能。

您应该使用useEffect以下方法来模拟此行为：

const [user, setUser] = useRecoilState(userState);

setUser({ avatar_url: imageURL, ...appUser});

useEffect(() => {
  console.log(user.avatar_url);
}, [user]);