问题标签 [recoiljs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
778 浏览

javascript - recoil 无法处理异步选择器的错误

Recoil 允许用户在异步选择器中抛出错误,请参阅其文档以了解更多信息。

“<ErrorBoundary/>”和“useRecoilValueLoadable()”都可以用来处理aysnc选择器的错误,但是在我测试的时候,它们都不能正常工作。

这是我使用“useRecoilValueLoadable()”的代码

但是,最后的结果是

在此处输入图像描述.

我尝试使用 <ErrorBoundary/> 也得到了同样的意外结果!反冲的版本是“0.2.0”。

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

0 投票
2 回答
384 浏览

reactjs - 是否有一种行之有效的方法来管理 Recoil 中的原子集合?

我正在测试 Recoil,我需要管理要在主页上显示的帖子列表。

我的第一个想法是用所有的帖子做一个大的Atom,但这似乎有点暴力,因为我们可以直接在主页上编辑帖子。

我的第二个想法是动态生成带有前缀的原子:

然后我意识到我是一个玩火的菜鸟,我会在 StackOverflow 上询问了解 Recoil 的人......

0 投票
1 回答
174 浏览

reactjs - 如何防止由于异步代码和 websocket 竞争条件导致的反应状态覆盖?

我正在构建一个以 reoiljs 作为状态管理器的反应应用程序,我需要从 Web 套接字获取数据并相应地更新状态。我不使用常规数组的原因是我需要在我的组件之间共享状态。

详细地说,该组件有一个 WebSocket 连接,并将有数据流式传输到其中。然后它需要通过推送接收到的数据来更新数组。问题是由于组件生命周期或其他原因,状态写入不正确,这就是我认为发生的情况

  1. 收到响应 1 并调用 setState([...state, data])
  2. 然后收到响应 2 并调用 setState([...state, data])
  3. 状态实际上是由响应 1 设置的
  4. 状态由响应 2 设置

问题是当响应 2 进入并调用 setState 时,它​​具有不包括响应 1 的旧版本状态。

我似乎无法弄清楚如何解决这个问题。这是精简的代码。

请注意,我不包括其他事件,例如ws.onopen和 return 语句或诸如此类的东西,并且原子声明和组件声明位于不同的文件中。

0 投票
1 回答
485 浏览

reactjs - 使用多个组件时如何获得多个反冲原子?

在某些组件中,我使用反冲原子来管理我的状态。一个例子是我的模态组件。它看起来像这样:

我正在使用这样的模式:

但是,如果我多次使用模态,模态会自动复制,但我仍然对所有模态只使用一种状态。当然,我不想那样。如果我多次使用一个组件,我希望多次创建状态,以便我可以单独更改每个组件的状态。

我读过还有atomFamilys。我现在可以使用这些吗?那我的代码应该是什么样子?如果我多次使用一个组件,是否也可以自动创建多个原子?

0 投票
1 回答
819 浏览

reactjs - 错误:useRecoilState 的参数无效:需要原子或选择器,但未定义

我收到了这个错误,但我不知道为什么会收到这个错误。我做的一切都很好。我在 Next JS 中使用 useRecoilState 来管理我的状态。

错误图像

这是回购的链接:https ://github.com/dingus45191/Radiant-Covid-Emergency-Site

作品现在只是删除任何不必要的后坐力进口

0 投票
2 回答
109 浏览

reactjs - 使用 RecoilJS (React) 的订阅者模式

我正在用 React、TS、Mapbox、react-mapbox-gl 和 RecoilJS 构建一个应用程序。

这是Dashboard我正在使用的组件:

这是CGOIncidentsMapConfig简化的组件:

这是我MapContext创建原子的文件:

如您所见,我想做的只是使用 RecoilJS 为 onClick 和 onZoom 事件创建订阅者模式。我的想法是将每个 Mapbox 层分隔在不同的组件中。

getEventHandler执行返回的函数时,里面的console.log只显示一个空数组,zoomSuscribers但是clickSuscribers我在Dashboard组件中看到的console.log是两个原子都有一个由组件设置的回调函数CGOIncidentsMapConfig。这些原子在第一次渲染时是空的,Dashboard一旦CGOIncidentsMapConfig组件被渲染就完成了。似乎 RecoilJS 更新了原子和Dashboard组件,正如预期的那样。

为什么函数中的 console.loggetEventHandler只打印一个空数组?因此,订阅者没有正确执行该事件。

提前致谢。

0 投票
1 回答
505 浏览

reactjs - 在 Jest 测试中确保用户操作触发 Recoil 状态更新的模式是什么

假设我有一个(相当做作的)控制器和视图

什么是正确的测试模式

当我有一个设置状态的组件并且我想验证该组件是否确实在更新状态时(例如,通过一个<input>并且我没有忘记将反冲设置器添加到onChange事件处理程序中),这种模式对我来说很常见.

我可以想象在自定义包装器中渲染被测组件,该包装器将整个状态设置为 INPUT 的值或其他东西,然后在我的测试中我得到那个 INPUT 的值并且我有状态,但是有更好的方法吗?

我想我基本上是想监视原子的二传手。

编辑澄清一下,我什至遵循反冲测试库所说的内容:如果您正在测试仅适用于一个组件的钩子,则应该一起测试它们。所以我的“单元测试”将单元视为“控制器作为钩子”和组件(视图)。

0 投票
3 回答
369 浏览

reactjs - 输入速度过快时,React 输入字段现在可以工作

我有这个简单的组件来检查用户名是否有效。它通过在输入值更改时查询 firebase 来实现。它有一个问题。当我在输入字段中输入太快时,其中的值没有足够的时间来改变,所以它只是错过了一些字符。这是代码:

对于状态管理,我使用 Recoil.JS。

组件代码:

0 投票
1 回答
467 浏览

react-native - 对 RecoilRoot 的多次重新渲染进行本机反应和反冲

我有这些组件,没有任何反冲钩。

当我在控制台中运行应用程序时,会显示指定的日志:

现在我要使用反冲钩子来变异和访问原子状态

我什至不使用从、、、返回的值和函数useRecoilValueuseSetRecoilState如果useRecoilState我使用它,它可以正常工作,但是在第一次渲染中,日志是:

为什么反冲会强制重新渲染包括根在内的多个组件,我根本没有改变状态,并且在 App 组件中也不依赖于任何状态!

0 投票
1 回答
139 浏览

reactjs - 两个基于渲染值的反冲反应测试冲突

authToken我有一个单独的原子,它用和username字符串存储一个对象。如果authToken存在,我想展示受保护的内容。如果没有,我想将用户重定向到登录页面。

测试:

  1. 不填充“authToken”,我们希望在渲染结果中包含登录内容。
  2. 填充“authToken”,我希望在呈现的结果中包含受保护的内容。

当按顺序 2、1 执行时,它们是成功的。当按顺序 1,2 执行时,它们会失败。

我想知道我是否缺少某些东西,或者这是一个已知问题。任何帮助将不胜感激。

原子

私人路由

测试

https://codesandbox.io/s/vigilant-shamir-27s35?file=/src/PrivateRoute.test.tsx