useRecoilStateLoadable(state)

此钩子旨在用于读取异步选择器的值。此钩子将隐式地将组件订阅到给定的状态。

与 useRecoilState() 不同，此钩子在读取异步选择器时不会抛出 Error 或 Promise（为了与 React Suspense 协同工作）。相反，此钩子为该值返回一个 Loadable 对象以及 setter 回调函数。

function useRecoilStateLoadable<T>(state: RecoilState<T>): [Loadable<T>, (T | (T => T)) => void]

state：一个可写入的 atom 或 selector，它可能包含一些异步操作。返回的 Loadable 的状态将取决于提供的状态选择器的状态。

返回当前状态的 Loadable，其接口如下：

state：指示选择器的状态。可能的值包括 'hasValue'、'hasError' 和 'loading'。
contents：此 Loadable 所代表的值。如果状态为 hasValue，则它为实际值；如果状态为 hasError，则它为抛出的 Error 对象；如果状态为 loading，则它为该值的 Promise。

示例

function UserInfo({userID}) {
  const [userNameLoadable, setUserName] = useRecoilStateLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

示例​

示例