问题标签 [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.

0 投票
1 回答
733 浏览

reactjs - 您可以订阅 Zusand 的某个州的某些部分吗?

目前,当更改组件中的状态时,我将状态订阅到一个商店,该商店在我调用的函数完成时更新。我这样做:

但是,当我在需要使用多个商店的屏幕上工作时,我有更多的参数并且无法设置整个状态。我可以订阅我的状态的某些参数来监听商店的变化吗?

我对此的想法会以某种方式传递到以前的状态,但似乎有点混乱:

有一个更好的方法吗?

0 投票
5 回答
2614 浏览

reactjs - 如何在类组件中设置 zustand 状态

我正在一个站点上工作,该站点使用zustand将全局状态存储在一个文件中。我需要能够在类组件中设置该状态。我可以使用钩子在功能组件中设置状态,但我想知道是否有办法将 zustand 与类组件一起使用。

如果有帮助,我已经为此问题创建了一个沙箱: https ://codesandbox.io/s/crazy-darkness-0ttzd

在这里,我在功能组件中设置状态:

我的状态存储在这里:

如何在类组件中设置状态?:

0 投票
0 回答
768 浏览

reactjs - Axios 返回承诺不会破坏与 zustand 反应的数据

我目前正在尝试让 axios 在反应钩子应用程序中运行。基本的 get 请求工作正常并提供了预期的结果,但问题来了:

我正在使用“zustand”进行应用程序状态管理,并建立了一个中央 backendService.js,我在其中声明了我的异步 axios 函数“getHome()”。console.log(response.data); 打印预期的数据。

},

我现在想从另一个文件调用 getHome 函数并首先记录结果。

现在我不明白的部分:console.log 给了我这个

PromiseResult 具有预期的对象,但我不知道如何访问它。

我对后端开发很陌生,所以如果我犯了任何明显的错误,请原谅我:) 感谢您的帮助!

0 投票
0 回答
254 浏览

javascript - 如何根据同时更新的另一个对象更新一个对象的属性 - zustand?

我有一个产品,我想根据数量获得该产品的总价格,我正在使用 zustand 进行状态管理。

这是我用来更新状态的函数。

这里的问题

userQuantity未更新并返回上一个值”。

所以我尝试的是这样

那是返回正确数量的“更新的”,那么其他方法可以解决它吗?

0 投票
0 回答
221 浏览

react-hooks - useFrame 和 zustand 是否与 useState 冲突?

默认情况下,我从 websocket 检索数据,每 2 秒采样一次。我使用 zustand 传播这些数据以进行状态管理。我有多个依赖于此数据的动画/组件。为了补偿 2 秒的间隔间隙,我计算了不是由 zustand 而是由 useState 处理的每一帧的数据。

我可以使用 CustomEvent 来更新每一帧的所有依赖组件,或者我可以使用自定义钩子,我认为这是我更喜欢的。

问题是每当 api > zustand > useStore 更新钩子的本地状态(样本)时,useFrame 都会丢失本地状态。

这是钩子...


快速回答是否定的,在这种情况下,useFrame、zustand 和 React.useState 都没有冲突

我的解决方案是通过 zustand 在每一帧上更新托管状态,并通过状态管理器传播状态,如下所示......存储方法:

然后在一个单独的组件中:

最后是传播:

0 投票
2 回答
911 浏览

reactjs - 如何使用 zustand 将对象键设置为状态

我正在使用 zustand 进行状态管理。我的商店设置如下:

当我调用 setFilters 时,我只希望 evaluationMonth 发生变化,但它也会删除现有值(在这种情况下为 searchQuery)。如何在更改所需值的同时保留旧状态。

0 投票
1 回答
470 浏览

zustand - Zusand 错误:无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

得到错误

错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。

在 next.js 环境中,当我尝试在实用程序函数中使用Zusand/utils/myfunction.js时:

那么如何在函数或 api 中使用Zusand存储/检索状态?找不到有关它的文档

0 投票
1 回答
108 浏览

javascript - zustand 什么时候选择器取决于范围?

zutand doc 提到如果选择器不依赖于范围,您可以使用选择器并提供以下示例

在此处输入图像描述

我不明白这doesn't depend on scope部分。有人可以提供一些示例,说明状态何时取决于范围,因此不应使用选择器?

谢谢!

0 投票
0 回答
100 浏览

reactjs - 为什么我总是需要使用 Zusand(React-Redux 状态管理工具) Store 返回一些 html?

为什么“inc”按钮不起作用,但其他按钮起作用?我是否遗漏了什么,或者这就是 Zusand Store 应该工作的方式?

我要渲染的页面

商店

这是 Zusand 状态管理工具的链接: https ://github.com/pmndrs/zustand

0 投票
1 回答
357 浏览

javascript - 事件期间的状态一致性和时间安排

好的,这是一个谜题。我有一个选择输入,我正在使用 Zusand 作为状态。我看到不一致的状态并且没有得到我怀疑的东西。

它看起来像这样。

选择有两个值:“一”和“二”。

如果我 console.log 这些东西出来,我会看到问题和错误。我不能在这个函数内部使用状态变量。它不会像我认为的那样等待、解决或表现。

所以对于我的选择,如果我在一个和两个之间切换,我会得到这个有趣的行为:

在选择输入上从“一”切换到“二”时,console.log 输出看起来像这样。

在选择上切换到“两个”时,我得到相反的结果,但这些变量不一样?

切换到“一”时就选择。因为有些事情不像我想的那样一致或解决。

我认为 zustand 状态变量会是一致的(尤其是当我添加 await 并且 eslint 告诉我 await 确实对这个函数有影响时)。现在这对我来说不是问题,因为我可以将参数用于我需要的一切。但我只是觉得我在这里遗漏了一些重要的东西,我希望当我需要依赖某个地方的状态更改或一致的存储时,Zusand 不会抓住我。