javascript - 如何将 API 调用的结果设置为 Recoil atom 的默认值？

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