1

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”。

大家好,请问如何解决这个问题?谢谢。

4

1 回答 1

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 文档

于 2021-05-02T11:30:46.603 回答