javascript - recoil 无法处理异步选择器的错误

Question

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

“<ErrorBoundary/>”和“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;

但是，最后的结果是

.

我尝试使用 <ErrorBoundary/> 也得到了同样的意外结果！反冲的版本是“0.2.0”。

大家好，请问如何解决这个问题？谢谢。

Answer 1

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>
  );
}

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

查看此沙箱以获取工作示例。要了解有关ErrorBoundary组件功能的更多信息，您应该阅读官方的 react 文档。