后坐力无法处理异步选择器的错误

问题描述

Recoil 允许用户在异步选择器中抛出错误，请参阅 its document 了解更多信息。

“”和“useRecoilValueLoadable()”都可以用来处理aysnc选择器的错误，但是我测试的时候都不能正常工作。

这是我使用“useRecoilValueLoadable()”的代码

import {RecoilRoot,selector,useRecoilValueLoadable} from 'recoil';

const asyncError = selector({
  key: 'asyncError',get: async() => { throw new Error("Test Error"); }
});

function test() {
  const loadable = useRecoilValueLoadable(asyncError);
  return (
    <h1>
      { loadable?.state === 'hasError' ? "Has error" : "No error" }
    </h1>
  );
}

function App() {
  return (
    <RecoilRoot>
      <Test/>
    </RecoilRoot>
  );
}

export default App;

但是，最后的结果是

。

我尝试使用 也得到了同样的意外结果！后坐力版本为“0.2.0”。

大家好，这个问题怎么解决？谢谢。

解决方法

React 中没有内置的 ErrorBoundary 组件。您必须自己提供或使用图书馆，例如 react-error-boundary。

那么您还必须使用 React.Suspense，就像您提到的文档中提到的那样。

export default function App() {
  return (
    <RecoilRoot>
      <ErrorBoundary FallbackComponent={Fallback}>
        <React.Suspense fallback={<div>loading...</div>}>
          <Test />
        </React.Suspense>
      </ErrorBoundary>
    </RecoilRoot>
  );
}

此外，您的选择器不是异步的。错误会立即抛出。

查看 this sandbox 以获取有效示例。 要了解有关 ErrorBoundary 组件功能的更多信息，您应该阅读 official react docs。