reactjs - 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]);