问题标签 [recoiljs]

I am currently making a TodoList app using Recoil and React and I am getting the error:

I believe this is preventing the app from building. It works in development mode.

Please help me fix this!

Here is the concerned file:

我在功能组件中使用 reactuseRef来获取 html 对象的链接并将其存储在 Recoil atom 中。例如：

但是当我的父组件 ummounts 我得到错误：

react-dom.development.js:20997 未捕获类型错误：无法分配给文件 reac-dom.development.js 中对象“#”的只读属性“当前”

我无法想象有什么问题；

我正在研究如何在我的应用程序中使用 RecoilJS，我喜欢 atomFamily 的概念——这似乎是跟踪列表中各个项目同时保持应用程序性能的好方法，因为每个项目的更新不会强制刷新整个列表。

我想以异步方式从远程服务器加载一组数据，比如说待办事项列表的项目（给出一个规范的例子），然后初始化 atomFamily 并从这些项目中的每一个创建一个反应组件。

我的第一个想法是创建一个 useEffect 挂钩。在其中我会获取数据，然后运行一个 for 循环并调用 atomFamily 为每个项目创建原子。

但后来我开始阅读有关 selectorFamily 的内容——听起来这可能是正确的方法？此外，有些原子效果（不稳定）看起来可能是执行此操作的正确方法，而不是使用普通的 useEffect 挂钩？现在我对在这里进行的正确方法感到困惑，并且我在互联网上没有找到很多关于此的信息。

你能指点我正确的方向吗？加载数据然后将其拉入 Recoil 系统的适当方法是什么？AtomFamily，选择器Family？我什至在正确的轨道上吗？

在此先感谢您的帮助，

格雷格

我正在使用 Recoil，我想从实用程序函数中访问组件（get/set）之外的存储。

更一般地说，人们如何编写可重用的函数来操纵 Recoil 的全局状态？使用 Redux，我们可以直接向 store 发送事件，但我还没有找到 Recoil 的替代方案。

使用 hooks 是一种很好的开发人员体验，但是很难将组件内定义的函数转换为外部实用程序函数，因为 hooks 只能在组件内使用。

有时，我们只需要使用共享状态的访问器/修改器（例如：）setBlockPickerMenu。

而且我们不需要值本身（例如：）blockPickerMenu。

当我们执行上述操作时，React 内部会发生什么？blockPickerMenu即使我们不主动使用组件，组件是否也会订阅更改？它是否会在更改时执行不必要的重新渲染？有没有办法以某种方式优化事物？

上面的示例使用了 Recoil，但我认为它对于任何共享状态（Redux 等）都可以类似地工作

这看起来应该很容易，但是为什么带有 setState 调用的按钮回调函数不会触发数据项的刷新？实际上，当按钮被选中时，只是不会更改 sma 的 computeSMA 按钮。设置输入的其他两个回调起作用。fetchData 更新图表，所以我无法弄清楚！一定是太累了……

我一直在尝试使用 Recoil 进行分页，但我被卡住了。似乎正在发生的是我订阅的组件在没有更新状态的情况下重新渲染。

在我的索引页面上，我使用 NextJS SSR 从 Firebase 获取初始负载。该有效负载作为道具传递给页面组件，然后作为数组存储在 Recoil atom 中。

内容使用JobFeed组件呈现，该组件接收 Recoil 选择器，该选择器返回状态的过滤版本。这一切都很好。

Recoil 原子看起来像这样：

过滤后的状态选择器如下所示：

我遇到问题的地方是组件中的分页功能。

jobState 和 filterState 原子是经过过滤的JobState 选择器的依赖项。使用 useRecoilState 设置 filterState 会触发JobFeed组件的重新渲染，没有任何问题（但它是同步的）。

但是，当异步 getMorePosts 函数更新 jobState 时，组件重新渲染并抛出错误“TypeError：无法读取未定义的属性 '0'。”

当我在 getMorePosts 调用 setState后console.log jobState时，我收到了前一个状态的值。

我试过了：

1. 将JobFeed组件包装在Suspense组件中，并检查 SSR。同样的问题。
2. 重构事物以使用 getRecoilValueLoadable。同样的问题。
3. 将 getMorePosts 逻辑放在选择器中。同样的问题。
4. 将 getMorePosts 逻辑放入 useRecoilCallback。引发嵌套钩子错误。

我错过了什么？

希望有人可以帮助我以更简单的方式更新我在更复杂的对象/数组上的反冲状态。我主要是一名 C# 开发人员，但正在尝试学习一些不错的 javascript 编码方法。这看起来很丑陋而且过于复杂，就像我的代码目前的样子。

由于状态实例是只读的，我无法直接更改它的值。使用下划线克隆方法甚至不会改变这一点。

所以这是我的简化对象，在现实生活中有很多不相关的属性：

在 React 我有状态声明 const [attribute, setAttribute] = useState(props.attribute as IDeviceAttribute);

或者其他地方有 Recoil 状态：const [deviceAttributeState, setDeviceAttributeState] = useRecoilState(recoilDeviceAttributeState);

在代码的某处，我需要更改值数组上的值并更新状态。在 React 状态和 Recoil 状态的两种情况下，“getter”实例都是只读/常量。

我最终得到了这个：

这么多行代码用于简单的状态更新！我敢肯定，对于某人来说，这是非常微不足道的任务，并且可以做得更优雅:-)

感谢您的帮助和时间

我是使用 React 和 Recoil 的新手，我想从使用Web Bluetooth API实时收集的数据中显示实时图表（使用 D3）。

简而言之，在调用await myCharacteristic.startNotifications()and之后myCharacteristic.addEventListener('characteristicvaluechanged', handleNotifications)，handleNotifications每次从蓝牙设备通知新值时都会调用回调（请参阅此示例）。

我正在使用钩子并尝试从回调中修改后坐力状态（这被简化到了极致，我希望它具有代表性）：

如果我想在应用程序的某处显示最新值，这可以正常工作。但是，我有兴趣将最后几个（比如说 10 个）值保留在循环缓冲区中以绘制 D3 图表。

我尝试了一些类似的东西：

但是，很明显，我遇到了此处描述的问题，其中该函数使用的temperatureList是在渲染期间捕获的旧版本。结果，temperatureState始终为空，然后替换为一个元素的列表。

如何在从外部回调更新的 React 状态/Recoil atom 中维护一致的列表？我认为这个问题有点相似，但我想避免使用像 Recoil Nexus 这样的另一个扩展。

我已经<input type="file" />并且想要触发.click()该输入。在 chrome、firefox、edge 中一切正常，但在 safari 中存在问题。

当我单击按钮触发时 inputFile.current.click()-它起作用了。但是当它发生在 useEffect/useLayoutEffect 内部时 - 它不起作用（我尝试添加超时，但它也没有帮助）。

重现问题的工作示例：https ://codesandbox.io/s/react-hooks-counter-demo-forked-49n2t?file=/src/index.js

尽可能少的代码来呈现问题

这个问题已更新 - useLayoutEffect 解决了没有后坐力的简化问题，但事实证明我的问题更复杂