useRecoilValueLoadable(state)

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

与 useRecoilValue() 不同，此钩子在从异步选择器读取时不会抛出 Error 或 Promise（为了使用 React Suspense）。相反，此钩子返回一个 Loadable 对象。

使用 useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE() 来实验性地支持基于修改 Recoil 状态的 React 18 过渡。

function useRecoilValueLoadable<T>(state: RecoilValue<T>): Loadable<T>

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

返回一个 Loadable，用于表示当前状态，其接口为：

state: 指示选择器的状态。可能的值为 'hasValue'、'hasError'、'loading'。
contents: 由此 Loadable 表示的值。如果状态为 hasValue，则为实际值，如果状态为 hasError，则为抛出的 Error 对象，如果状态为 loading，则为值的 Promise。

示例

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

示例​

示例