问题标签 [react-toastify]

我找到了 useToast和useToastContainer，但是没有文档，我不明白你如何使用这些钩子。谁能提供一些关于这些钩子的信息？

我从减速器获取状态，但它加载了两次，例如，当我获得状态时，烤面包机出现了两次。所以，问题是我得到了两次登录 api 登录失败状态，因为这个烤面包机正在加载两次。我尝试调试问题，但不能 下面是代码（HTML 已删除）

如何在 reactjs toastify 中添加“单击此处查看”之类的链接并将其链接到其他网址？目前我只能向它添加静态文本。我用了：

我想显示另一行，说单击此处以使用 href 属性查看

What I want is, when I get no data from the api, instead of this No data, I want A notification or toast.error to get displayed.

shops.jsx

In the 6th line you can see <span >No data</span> instead of this I want a toast.error notification, but when I write toast.error("No data"); instead of this span i got something like this instead of error notification

沙箱：https ://codesandbox.io/s/angry-ganguly-6q0q2?file=/src/MessageToast.tsx

使用上面的代码，我正在尝试使用 redux 显示带有状态的 react-toastify。一旦我从另一个组件单击登录按钮，错误状态就会更改为 true 并进入 messageToast 组件中的函数 errorToast() 。但是吐司没有显示出来，需要一些帮助来解决这个问题。谢谢你。

我有一个 redux 商店，其中包含一个看起来像的对象

当用户单击按钮时，时间戳设置为 10（通过调度）。如果有时间戳，我倒计时到 0，然后react-toast在整个应用程序中使用设置通知。问题是我在 Notification 组件上没有可用的 roomId，因为 Notification 组件必须放在应用程序根目录下，否则它会被卸载并且我的 Notification() 逻辑不起作用。（我可以在 Notification 或 App 中访问房间，但它以数组形式出现，例如 ['room01', 'room02'] 也在 redux 中，但我如何选择两个房间并访问它们的时间戳以及运行函数倒数？）。

基本上我需要检查每个房间的 redux 存储中是否有时间戳，如果有，倒计时到 0 并显示带有 roomId 的通知。导航到不同页面时，通知/设置间隔应该可以工作。

我有 2 个房间{roomId: room1, roomId: room2}，我想在 localStorage 上为每个房间保存对象。

对象看起来像

当用户关闭相应房间的通知时， notifyRoom 对象将保存在 localStorage 上。

我遇到的问题是这一次只会为一个房间保存一个对象。因此，如果您关闭 room1 通知，则在 localStorage 上有roomId: room01, dismissed: true，如果我关闭 room2 通知，则 room1 的先前 localStorage 对象将被 room2 覆盖。

如果 roomId 匹配，我只需要它覆盖。否则只需为 locatStorage 上的每个不同 roomId 创建新对象。

非常感谢

我正在研究反应项目，我试图在道具（ isNotificationOpen ）为真时在 div 部分中使用 react-toastify 显示吐司。我尝试了一个类似下面的示例，但我不希望在按下按钮时触发 toast，我希望在 isNotificationOpen 道具设置为 true 时触发 tost，我该如何实现？

我有一个带有某种形式的屏幕，在提交时，我使用 axios 将请求发送到后端。成功收到响应后，我用 react-toastify 展示了一个 toast。非常直接的屏幕。但是，当我尝试使用 jest 和 react 测试库的集成测试来测试这种行为时，我似乎无法让 toast 出现在 DOM 上。

我有一个像这样的实用程序渲染器来渲染我正在使用 toast 容器测试的组件：

在测试本身中，我使用 react-testing-library 填写表单，按下提交按钮，然后等待 toast 出现。我正在使用模拟服务人员来模拟响应。我确认响应返回正常，但由于某种原因，toast 拒绝出现。我目前的测试如下：

我正在寻找具有角色警报的元素。但这似乎行不通。另外，我尝试做这样的事情：

我对 JS 有点陌生，问题可能是由于 axios 和 react-toastify 的异步性质，但我不知道如何测试这种行为。我尝试了很多东西，包括模拟计时器并运行它们，模拟计时器并推进它们，不模拟它们并等待等。我什至尝试模拟 toast 的调用，但我无法让它正常工作。另外，这似乎是一个实现细节，所以我认为我不应该嘲笑它。

我认为问题是我在 axios 承诺解决后显示敬酒，所以计时器不知何故感到困惑。

我试图搜索很多地方，但未能找到答案。

提前致谢。

我正在尝试在我的项目中使用 toastify，但似乎 react 没有选择类库。当我执行操作时，我可以看到显示消息，但它仅以文本和普通 div 的形式出现。

我已经通过 webpack 进行了修改，所以我可以使用 css 模块，这可能是问题吗？请参阅下面的代码：

应用容器：

我使用它的组件：

我添加了一张图片来演示 UI。

开发和生产的 css webpack 配置：

有任何想法吗？