useRecoilStateLoadable(狀態)

此勾子旨於用來讀取非同步選擇器的值。此勾子會隱式讓元件訂閱指定的狀態。

與 useRecoilState() 不同，此勾子讀取非同步選擇器時不會擲出 Error 或 Promise（目的是配合 React Suspense 運作）。相反地，此勾子會傳回值的 Loadable 物件和 setter 回呼。

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

state：可寫入的 atom 或可能具有某些非同步操作的 selector。傳回的可載入狀態依所提供的狀態選擇器的狀態而定。

傳回具有介面的當前狀態的 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;
  }
}

範例​

範例