recoil 无法处理异步选择器的错误答案

【问题标题】：recoil cannot handle the error of async selectorrecoil 无法处理异步选择器的错误
【发布时间】：2021-07-18 22:12:14
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs asynchronous selector recoiljs

【解决方案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>
  );
}

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

查看this sandbox 以获取工作示例。要详细了解ErrorBoundary 组件的功能，您应该阅读official react docs。

【讨论】：

在 get async 函数中使用 this 来异步抛出。
return new Promise((resolve, reject) => { // 使用下面的行之一 setTimeout(() => resolve("delayed no error"), 3000); setTimeout(() => reject("因错误延迟"), 2000); throw new Error("Test Error"); });
我已经和recoil 团队沟通过，这是bug。旧版本的recoil可以正常工作，但是新版本因为缺少单元测试就不行了。现在，recoil 团队解决了这个问题并添加了单元测试。这个问题不会再出现