问题标签 [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 投票
2 回答
929 浏览

reactjs - nextjs 在本地存储中反应反冲持久化值:初始页面加载处于错误状态

我有以下代码,

我正在使用 recoil 和recoil-persist。那么,当darkMode 值为true 时,className 应该包含一个dark 类,对吗?但事实并非如此。我不知道这里有什么问题。但是当我第一次刷新时它不起作用,之后它就可以正常工作了。我也尝试了 darkMode === true 条件,但它仍然不起作用。您会看到样式化的 jsx,效果很好。这会随着 darkMode 值的变化而变化,当我刷新它时,它会保留数据。但是当我检查时,我在第一个 div 中看不到黑暗类。此外,当我 console.log 的 darkMode 值时,我看到了 true,但不包括 dark 类。

这是沙盒链接

也许这是一个愚蠢的错误,但我在这上面浪费了很多时间。那么我在这里做错了什么?

0 投票
1 回答
1205 浏览

reactjs - “在渲染时没有保留反冲值,或者在超时后提交。这很好,但很奇怪。未定义”是什么意思?我该如何解决?

我正在运行一些 react-testing-library 测试并收到警告Did not retain recoil value on render, or committed after timeout elapsed. This is fine, but odd. undefined。这是什么意思?我该如何解决?

我刚刚添加了一个新的反冲原子。

我正在使用反冲 0.3.0。

0 投票
1 回答
518 浏览

reactjs - React Custom Hook 函数未读取反冲原子

我正在尝试在反应项目中使用 formik、打字稿和反冲制作一个多请求、多步骤的表单。我创建了一个自定义钩子,它返回三个函数,其中一个函数需要一个特定的 UUID 用于它正在使用的模型,以便它可以发出 PUT 请求。当我使用同一个钩子的另一个函数发出 POST 请求时,这个 UUID 被设置为一个 Recoil Atom,然后我尝试在它下面的函数中访问它,但它没有正确显示。我试图等待它并将其分配给一个变量,但无济于事,当我在函数外部记录它时,状态返回我需要的值,但是当我在函数内部(我需要它的地方)记录它时,它是空的。而且我试图避免使用本地存储,因为这意味着要管理的另一种类型的数据可能会破坏我的程序的其余部分。

这是钩子:

这是原子:

在这个钩子中,当createInstitution请求被调用并成功时,id 被设置为 Recoil Atom机构Id ,我尝试将它记录在两个不同的行中,一个在函数之外,一个在函数机构Edit中,如下所示:

在此处输入图像描述

第一行是来自函数外部和钩子内部的 console.log 的日志。第二行是机构编辑函数中的 console.log。

为什么会这样?如何在钩子函数中正确访问它?

0 投票
1 回答
67 浏览

react-native - 使用 useRecoilValue 时 React Native Invalid hook call

我在使用 useRecoilValue 时收到错误无效的挂钩调用。我用这个钩子错了吗?那么我该如何解决这个问题呢?

List.fn.js

0 投票
1 回答
54 浏览

reactjs - 如何在 React 中使用 RecoilJS 管理大型数据集?

我有一个 React 应用程序,它当前使用存储在 Context API 中的大约 50 个变量。我想尝试使用 Recoil 作为替代方案,但我有一个问题。我是否必须,最好的做法是将每个变量存储在自己的原子中;然后每次我需要使用它时单独导入它?

有了上下文,我可以这样做:

然后使用 appState 和 setAppState 作为我的 Context 提供程序中的值。定义和导入 50 个单独的原子有点令人生畏。当然,我不会同时使用所有 50 个,但在使用 Context 之后似乎仍然退了一步。

使用 Recoil,我将不得不:

接着:

有一个更好的方法吗?

0 投票
0 回答
184 浏览

react-native - 在 React Native 应用程序中安装 Recoil 时出错

我正在尝试使用 Recoil 在 react-native 应用程序中管理我的状态。我正在尝试通过运行 npm install recoil (如教程中所写)来安装反冲,但安装失败并出现以下错误:

我该如何解决这个问题?谢谢,

0 投票
1 回答
272 浏览

reactjs - 使用 React 和 Recoil.js 保持 websocket 连接的状态

我正在寻找一种实用的方法来保持与 Recoil 的 websocket 连接。

我的想法是将websocket放入一个原子中:

这是一个好方法还是我在那里打破了一些规则?

0 投票
0 回答
779 浏览

reactjs - Zusand 和 Recoil 性能之间的概念差异是什么

我一直在研究ZusandRecoil——两个相对较新的状态管理库。

Recoil 被大量宣传为对于具有深度嵌套结构的 React 应用程序“非常高效”。但是,我看不出它如何(或如何准确地)在性能方面优于 Zusand(并发模式除外)。

我可能弄错了,但这是我从文章和谈话中理解它的方式:“为什么”Recoil 表现出色的主要原因是,您所做的任何更新只会触发相关组件重新渲染,而不会打扰任何其他组件。Recoil 通过设计和开箱即用允许它,而基于上下文的库必须通过整个树传递每个更改,对这些更改进行差异/协调,然后可能只重新渲染必须更改的内容。

现在,Zusand 根本不使用 Context API。因此,我会假设(除了并发模式),它将具有与 Recoil 相当的性能优势,其中 Zusand 只会“触摸”相关组件,而不会通过整个组件树传递更改。

如果我不理解,请告诉我。这两个库在性能上是否具有可比性(没有并发模式)?或者 Recoil 的原子范式是否还有其他固有属性,这使得它在理论上在性能方面更胜一筹?

请注意:我希望答案不要过多地受模式和实践的影响。我知道有时范式的最大好处可能在于“它强制执行的声音模式”,但我感兴趣的不是它们强制执行的内容,而是它们允许通过可比努力做的事情。例如,我了解平坦的标准化状态将允许 Zusand 获得更好的性能,并且 Zusand 不一定“强迫您以适当/可扩展的方式执行此操作”。但我不希望正确模式的“可选性”成为劣势。

0 投票
0 回答
63 浏览

javascript - 设计 Recoil.js 原子以将对象数组显示到表格中

我有对象数组[{id: 1, data:{}}, {id: 2, data: {}}]。我想渲染到一个表,以便只有更改的行重新渲染,

一个问题是这个数组每 500 毫秒更新一次(仅参考更新数据可能/可能不会改变),我终于可以解决问题,但代码看起来很难看!

例子:

在上面的示例中,组件将每 500 毫秒重新渲染一次。现在的目标是将其转换为recoiljs,以便:

  • 仅当数组中有新的 id时才重新渲染主组件(一个带间隔的组件)
  • 行组件仅在其对象已更改时才重新渲染

我尝试了什么: 我当前解决方案的 Playground 示例。我尝试了很多 atomFamily/中间选择器试验。但最终得到了近 4-5 个选择器,这样我就可以在更改时将数组转换为对象,另一个用于提取键,另一个用于按键选择对象。但它看起来非常冗长/复杂。

我做错了吗?

0 投票
1 回答
122 浏览

reactjs - 如何在 Recoil 中实现相互依赖的状态?

我很难弄清楚如何使许多 Recoil 原子状态相互依赖。

例如,(这不是我的用例,但它是我遇到问题的概念的简单演示),想象一个单选按钮组,其中每个单选按钮的状态由 atom<boolean> 保存。并且单选按钮在反应树上都彼此远离并且不共享父级。

当一个原子的状态变为真时,所有其他原子的状态都需要将自己设置为假。当所有原子都分布时,如何实现这样的事情?

(对于我的实际情况,我的原子包含对象而不是布尔值,并且其他原子需要以某些方式更改,具体取决于该对象中的字段以及更改原子。)