1

我有一个 api 请求，我喜欢将响应存储在 Recoil atom 中。
我试图弄清楚这样做的最佳方法是什么。
问题是我的选择器没有依赖项（原子），因为我的请求没有参数：

const connectionsQuery = selector({
  key: "Connections",
  get: async () => {
    const connections = await findConnections();
    return connections;
  },
});

当我执行以下操作时，我收到信息错误： 错误

这就是我使用选择器的方式：

function DashboardLayout() {
  const classes = useStyles();
  const [isMobileNavOpen, setMobileNavOpen] = useState(false);
  console.log(222);
  const connections = useRecoilValue(connectionsQuery);
  console.log(333);
  ...
  ...

'222' 控制台已记录，但 '333' 从未记录。

我错过了什么？

4

2 回答 2

0

你必须用 Suspense 包装你的组件。await选择一个选择器意味着依赖于该选择器值的组件将暂停渲染，直到有一个值，因为 Recoil 内部会抛出一个 Promise（这是 React 中暂停背后的全部想法）。

因此，要使其正常工作，请DashboardLayout使用 Suspense 组件包装您的组件：

<React.Suspense fallback={<div>loading...</div>}>
  <DashboardLayout/>
</React.Suspense>

这在反冲文档中也有说明。要了解有关并发模式和悬念的更多信息，您应该阅读官方的react 文档以了解其背后的机制。

于 2021-03-30T09:30:59.830 回答
-1 
const connectionsQuery = selector({
     key: "Connections",
     get: async ({ get }) => {
          const connections = await get(findConnections);
          return connections;
     },
 });

我认为您缺少 get 道具，findConnections 是您的响应请求的原子状态，真的吗？还是一个功能？

于 2021-03-30T02:35:49.443 回答