如何将 API 调用的结果设置为 Recoil 原子的默认值？

Question

我试图将 RecoilJS 中原子的默认值设置为异步 API 调用的值。我这样做是为了当某个 React 组件呈现时，它将拥有数据库中的所有当前集，而无需调用 useEffect()。这是我的代码...

const sets = (async () => await setService.getAll())()

export const setsState = atom({
  key: 'sets',
  default: sets
})

这是我遇到的错误...

index.js:1 Warning: Cannot update a component (`Batcher`) while rendering a different component (`App`). To locate the bad setState() call inside `App`, follow the stack trace as described in https://facebook.com/setstate-in-render
    in App (at src/index.js:10)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:9)
    in RecoilRoot (at src/index.js:8)

我采取的方法有什么根本性的错误吗？我应该以另一种方式完成这个吗？我做错了什么，还是这只是 Recoil 的一个坏功能？

Answer 1

您可以尝试创建一个异步选择器并放入 atom 的默认值，如下所示：

const mySelector = selector({
  key: 'mySelector',
  get: async ({get}) => {
    return await setService.getAll()
  }
})

const myAtom = atom({
  key:'myAtom',
  default: mySelector
})

Answer 2

Recoil 维护者已知您报告的警告，并将在下一版本中修复。

不建议：如果您想暂时隐藏它，您可以将 React 降级为v16.12.0，这取决于您是否可以忍受此警告，直到下一个 Recoil 版本