问题标签 [zustand]
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.
javascript - 如何在 Next.js 应用程序中处理全局状态
如果您查看下面的 GIF,您可以看到我的项目以及每次页面更改发生时auth
,userData
和拉入新数据的方式。notifications
我理解为什么会发生这种情况,正如您在我的_app.tsx
useEffect 中看到的那样:
由于我使用的是 Firebase,因此我想在userData
and上获得实时更新notifications
,但是在我的 useEffect 中使用 onSnapshot 意味着它会在每次页面加载时执行此操作,这是我不想要的。我已经有了以前的状态,我不想重新下载它们。
有没有人有办法告诉 Next.js 等到客户端加载后再重新运行 useEffects ?(我知道一个菜鸟问题,但我不确定如何解决这个问题)
javascript - zustand:更改存储对象中的参数值
我正在尝试为 Zusand 中的分级电影状态创建一个函数。
状态由一组对象组成,例如有两个条目:
以下是管理ratedMovies 更改的功能。这就是问题所在。我希望它检查在ratedMovies 状态中是否存在具有相同 imdbID 的对象。如果是这样更新它的值,而不是添加另一个具有相同 imdbID 但新值的对象。
如果我尝试更改上述状态示例中的一部电影的评分(它们处于状态 ofc),我会收到 IF 控制台检查,并且应用程序因错误而崩溃:
TypeError: Cannot create property 'userRating' on number '0'
如果状态为空或者我更改了其他电影的评分,我会得到 ELSE 控制台检查,但它们仍然没有添加到状态中。
可以对电影进行评分的输入上的 onChange 函数会创建一个与状态数组中相同的对象,并将其传递给管理ratedMovies 状态的函数:
其输出为:
我希望我能清楚地解释一切,我将非常感谢有关如何解决此问题的任何提示,在此先感谢!
reactjs - nextjs ssr 导致客户端状态持续冲突
我zustand
用来管理我的状态。
我将宽度状态保留在用户本地存储中,然后重新加载并在控制台中,我看到如下错误:
道具
style
不匹配。服务器:“宽度:400px” 客户端:“宽度:385px”
这是因为默认状态是400,但在客户端本地存储中是385,加载时会产生冲突
当我尝试保持挂载和卸载组件的状态时,它变得最糟糕,因为默认服务器状态是挂载但客户端状态是卸载并且它会使客户端崩溃
eslintrc - 即使在编辑 eslintrc 文件后,no-param-reassign 问题仍然存在
因此,我将 Immer 与 Zusand 一起使用,在某些情况下,我正在重新分配整个状态,因此我得到了“no-reassign-param”。好的,很好 - 似乎可以修复,所以我将它添加到我的 eslintrc 文件中
但是,错误并没有消失。我什至将它添加到页面顶部,仍然没有运气。
我的使用错误在这里:
为什么这不会坚持或工作?
javascript - 在没有 onClick 的情况下在 React 3 Fiber 中获取对象的世界位置
目前我正在创建一个反应机器人模型。这个机器人模型是 .glb 格式的,我正在使用 React Three Fiber 将每个网格对象粘贴到场景中(我从搅拌机中获得了网格的名称)。通过 zustand 和我的控制功能,我可以旋转一些关节以使机器人朝期望的方向移动。我的下一个目标是“提取”关节的每个世界坐标,并将它们显示在靠近控制按钮的叠加层中。我已经尝试过这样的事情:
但这仅在我单击想要坐标的关节时才有效。当我改变一些角度时,我想在我的控制功能上使用 onClick 事件(完成不同的功能,而不是 THREE 或 GLTF 的一部分)来做到这一点。有任何想法吗?
javascript - 通过侦听反应挂钩中的套接字事件或在中间件中处理它们来更新组件状态?每个都有什么缺点?
我有一个socket
用于调度和侦听来自服务器的事件的类。
该类具有在和state
之间进行同步的方法。server
client
以下是我如何监听来自服务器的更改或事件。
还有另一种方法是订阅类store
内部并使用任何更改来更新。在对这些侦听器和调度程序的当前结构进行任何更改之前,我没有实现任何东西,我需要通过列出每个范例的and来做出更好的决定。如果通过中间件范式的真实示例来回答,我将不胜感激。Game
store
pros
cons
typescript - 将持久化中间件添加到 zustand store
我想在我的useGlobalStore
. 我想在那里处理(设置和获取)会话存储的数据。我浏览了文档,但找不到如何将我的create
和persist
功能组合在一起的答案。
这是我的useGlobalStore
:
javascript - 在不渲染整个屏幕的情况下每秒更新子组件中的当前时间
我正在使用 Zusstand 使用商店进行响应,在该商店中,我创建了一个计时器,该计时器使用setInterval()
函数每秒更新一次时间。
我在商店中创建它,希望将时间传递给各种子组件,同时保持时间从中心位置存储和共享。
我能够更新商店中的时间并成功记录它,但是当我将它传递给子组件时,它们并没有更新时间。如何传递更新的时间并导致每经过一秒重新渲染时间?我不想useEffect()
在子组件中使用 a 。
ZUSTAND 商店
CHILD COMPONENT(这是我要显示时间的地方)
reactjs - Zusand 中的状态更改不会触发重新渲染
我对 React 很陌生,这是我第一次与 Zusand 合作。我有一个存储在 zustand 存储中的带有布尔值的单元格表(一个二维数组)。单击单元格时,我希望它切换布尔值(由开/关表示),但表格不会重新呈现。控制台日志返回给定索引中的正确值。
这是一个复制我的问题的沙箱: https ://codesandbox.io/s/cocky-kepler-7e2s5?file=/src/App.js
谢谢!
reactjs - 如何在使用 normalizr 规范化的状态下将没有 id 的子实体添加到父级
我最近开始在一个新的 React 应用程序中使用normalizr和zustand 。到目前为止,这是一次非常好的体验,解决了我过去遇到的大部分痛苦问题。
我刚刚遇到了一个问题,在过去的几天里我想不出一个干净的方法来解决。
想象一下,我有一个 normalizr-normalized 状态,如下所示:
我们有一个页面,允许用户向广告系列添加一个或多个触发器,然后保存它们。问题是在添加这些触发器时,它们没有 id,直到用户单击 Save 按钮(id 由数据库生成)。单击 Save 按钮时,状态为denormalize
d(通过normalizr
的denormalize
函数)并作为有效负载发送到后端,如下所示:
问题是,如果用户将实体添加到 中triggers
,它没有 id,因为 id 是由数据库生成的,我找不到将其添加到状态的正确方法(由于标准化状态的基于 id 的性质)。
我能想到的唯一解决方法是在前端添加触发器但尚未保存时生成一些临时 ID(例如 uuid),然后在非规范化时遍历每个实体,执行类似的操作if (isUuid(trigger.id)) delete trigger.id
,这似乎太乏味和解决方法.
感谢你的帮助。
PS这里有类似的解释。问题是在我们的例子中,generateId('comment')
逻辑发生在后端。