问题标签 [zustand]

我对使用 jest 很陌生，我正在尝试测试一个组件，该组件会根据我的全局状态进行状态更改（使用 Zusand）。基本上我单击一个按钮并将其添加到我的 state.traits 中。这是我的组件代码：

这是我的商店代码：

这是我的测试代码：

发生了什么，是它一直告诉我 renderHook 不是一个函数，并且特征总是未定义。任何帮助将不胜感激！

我正在使用 zustand 和 typescript。我的代码出现此错误

我不知道如何解决这个问题。我正在从我的 useStore 库创建一个对象。我尝试使用“类型”，但它在代码编辑器错误中引发了这些 错误

TS

问候。

所以我正在尝试打字稿。我基于的初始代码是在 javascript 上

当我将其更改为打字稿时，它会引发这些错误

我试图创建一个接口来将道具传递给它

然后我应用到箭头函数

我得到了这些新的语法错误

笔记

在<td>{english}</td>箭头函数表上的行。我这样做是因为我试图用英语选择每个口袋妖怪的名字。这意味着我想要它key

这是我正在使用的口袋妖怪数组的结构
https://gist.githubusercontent.com/jherr/23ae3f96cf5ac341c98cd9aa164d2fe3/raw/0658aeff401d196dece7ec6fe6c726c6adc1cc00/gistfile1.txt

这是完整的代码

我正在使用 Zusand 来存储状态，除此之外一切正常。当我单击歌曲按钮时，我希望它从列表中过滤。

目前在新加载它显示 3 首歌曲。单击该按钮时，它应该进行过滤（并且首先会过滤），但是一旦我单击另一个按钮再次进行过滤，则什么也没有发生。

所以如果我选择/点击Song 1它Song 2应该只显示这些歌曲。

我认为我为此编写的逻辑是正确的，但我必须在重新渲染时做错了什么。

抱歉，我知道人们喜欢在这里上传示例，但我总是觉得使用 React 文件很难，所以对于这种情况，我使用https://codesandbox.io/s/damp-waterfall-e63mn?file=/src/App。 js

完整代码：

样本数据：

我想解释一下我的用例，这样你就可以很好地理解它

当用户将产品（product_id = 1）两次添加到购物车并且产品具有相同的选项（红色，xl）时，我有购物车和产品我增加了数量，

如果用户添加相同（product_id = 1）但有其他选项（绿色，xl），我将此产品作为单独的产品添加到购物车。

现在这很好用！

但是当用户在添加了上述2个产品后，再次添加具有相同选项（红色，xl）的相同产品时，它被添加为单独的产品！

如果之前存在的产品选项应该增加数量，否则我期望将其单独添加。

我试过的

将选项 id 添加到 Product 属性中并检查它之前是否存在然后处理我想要的但它不能很好地工作并将第三个产品添加为单独的产品！

屏幕记录

代码片段

zustand专卖店

产品详情

效用

我想将我的 zustand 状态分解为更小的可重用对象；但是，记录在案的 zustand 模式似乎都涉及将操作提升到顶级存储对象。有没有办法允许内部对象发生突变，而不必为每个对象重复每个操作？

例如，假设我们有一个车辆对象：

我可以有一个包含两个命名车辆的状态

但是，似乎如果我还想导出 mutators，我需要为每个对象重复每个操作，并带有相当多的样板：

有没有更简单的表达方式？

我正在定义一个 zustand 商店（与此问题无关的库），并希望避免为该商店维护一个单独的类型或接口，所以我试图从我的初始商店的返回类型中推断它：

如您所见，我想将商店的类型设置为初始商店（见下文），而不是create<Store>，这迫使我将每个新字段添加到初始商店以及Store类型中。

这是我想从中推断类型的函数，但问题是它需要两个参数，这两个参数也取决于它的返回类型：

TS 不允许我这样做并给我这个错误： 'getInitialStore' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

有没有办法在没有单独维护的Store类型的情况下实现这一点？

我使用 Zusand 创建了以下商店：

我认为这将是切换show. 然而，打字稿并不高兴——它在下面有一条红色的波浪线，show并!state.show带有以下错误消息：

知道为什么我会收到该错误消息以及如何使用 Zusstand 正确设置切换功能吗？

谢谢。

每当我通过 onSnapshot 从消息集合中提取新消息时，我的消息收件箱都不会重新呈现。

正如我在开发工具中看到的那样，我可以确认新消息肯定存储在 auseRef中，但是该消息没有进入 DOM。

我遵循zustand's了解释使用 ref 的文档，并且建议使用他们的订阅方法来重复发生状态更改：https ://github.com/pmndrs/zustand#transient-updates-for-often-occuring-state-changes

谁能看到我可能出错的地方？

获取对话和实时更新的消息页面：

映射对话并显示它们的收件箱对话容器：

我想更新为组件定义的日期时间范围并以指定的时间间隔更新它。我能够将其设置为 DateRangeGlobalState 状态（在此处使用 Zusand），但 UI 与状态不一致。我还在文档中读到它应该只用作不受控制的组件，但我的好奇心不会放过它。这真的可以做到还是我应该放弃？这是我对 DateTimePicker 的实现：

下面的代码显示了 DateRangeGlobalState 组件：