跳转到主要内容

useRecoilValueLoadable(state)

此 hook 用来读取异步 selector 的值。使用此 hook 会使组件隐式地订阅给定的 state。

useRecoilValue() 不同,当此 hook 从异步 selector(为了和 React Suspense 一起工作)读取数据时,不会抛出 ErrorPromise,它会返回一个 Loadable 对象。


function useRecoilValueLoadable<T>(state: RecoilValue<T>): Loadable<T>
  • state:一个 atom 或一个 可能 有一些异步操作的 selector 。给定 selector 的状态决定了返回的 loadable 的状态。

返回一个具有以下接口的 Loadable

  • state:表示 selector 的状态。可选的值有 'hasValue''hasError''loading'
  • contents:此值代表 Loadable 的结果。如果状态为 hasValue,则值为实际结果;如果状态为 hasError,则会抛出一个错误对象;如果状态为 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;
}
}