React-toastify 显示多个 toast

2024-03-10

我正在构建一个包含多个组件的 React 应用程序,并且我正在使用其中至少一半的组件React-notify除了一个之外,几乎所有这些都可以正常工作。在这个中,当我触发 toast 时,我会得到四个 toast,一个在另一个后面,但我相信它们不是不同的 toast,因为它们具有相同的 ID。

我找到了这个线程https://github.com/fkhadra/react-toastify/issues/182 https://github.com/fkhadra/react-toastify/issues/182,这里用户遇到了与我相同的问题,唯一的例外是我没有设置autoclose,他甚至提供了一张显示问题的 gif:

https://i.stack.imgur.com/SiqRo.jpg https://i.stack.imgur.com/SiqRo.jpg

根据此线程的解决方案将删除所有<ToastContainer />组件并将其呈现在应用程序根目录中,在我的例子中是App.js。我这样做了,但是吐司不再显示,但我不知道我做得是否正确。

除此之外,我还尝试设置自定义 ID,但它没有改变任何内容。

我在用React-router-dom,也许这会影响某些事情,我无法找到正确的答案,也无法在文档中找到任何其他来源。

这是我的简化版本App.js:

import Layout from './containers/Layout/Layout';

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <Route path="/clientes" exact component={ClientesControls} />
            <Route path="/adm" exact component={AdmControls} />
            <Route path="/" component={OrcConfig} />
            <ToastContainer />
          </Switch>
        </Layout>
      </BrowserRouter>
    );
  }
}

以下是正在生成错误的组件的示例:

import React from 'react';

import axios from '../../../axios';

import { toast } from 'react-toastify';

const listarProdutosItens = props => {
    
    const excluirItemHandler = i => {
        
        let key = props.listaItens[i].key
        let categoria = props.listaItens[i].categoria

        axios.delete(`/adm/${categoria}/${key}.json`)
            .then(res => {
                props.fetchLista()
                notify('excluído')
            })
            .catch(error => notify('não excluído'))
    }

    const notify = (arg) => {
        if (arg === 'excluído') {
            toast.success('Produto removido com sucesso')
            console.log('TESTE')
        } else if (arg === 'não excluído') {
            toast.error('Erro ao tentar remover produto')
        }
    }

    return (
        <div className="row border-bottom mt-2">
            <button onClick={() => excluirItemHandler(i)} ></button>
            {/* <ToastContainer /> */}
        </div>
    )

}

正常工作的组件具有相同的语法。

任何帮助将不胜感激。


我也遇到了同样的问题(而且我的问题已经超出了路由器的范围)。这可能无法解决根本问题,但对我有用的是添加自定义 toast id,即更改

toast.success('Produto removido com sucesso')

to

toast.success('Produto removido com sucesso', {
    toastId: 'success1',
})

并且重复的吐司不再出现。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React-toastify 显示多个 toast 的相关文章

  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 如何聚焦反应路由器链接

    我有一个用于搜索的输入框 并且希望能够按向下键将焦点从输入移动到列表的第一个s 看来我这里的东西不起作用 因为不是实际的 DOM 节点 我能够使用它来工作 a 代替 though let Link require react router
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • javascript中输入类型时间的值

    我有这个html
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • 使用 nginx 在云上部署 django 和 React

    我有一个 digitalocean 服务器 并且已经使用 Gunicorn 和 nginx 部署了 Django 后端服务器 如何在同一台服务器上部署 React 应用程序 您可以构建 React 应用程序并使用 Nginx 提供其静态文件

随机推荐

  • 标签替换换行符[重复]

    这个问题在这里已经有答案了 我有一个带有文本区域的表单 我想将输入中的换行符更改为段落 使用 p 标签 我正在使用爆炸和内爆来替换 n with p p 但是如果你连续有两个换行符 你最终会得到 p p p p 我试图使用 foreach
  • Asp.net MVC 中的 TimeSpan 和“24:00”解析错误

    我的 Web 应用程序中有一个模式对话框 用户可以在其中输入 00 00 到 24 00 之间的时间范围 范围滑块用于选择该范围 一切都按预期工作 除了每当用户将正确的范围句柄设置为具有值 24 00 时 默认模型绑定器无法解析此值Time
  • 对于不成功的 Try() 方法,输出值应该设置为多少?

    我正在实现 TryParse string s Out object result 方法 如果解析失败 我不想触及 out 参数 因此之前的任何结果都将保持不变 但 VS2k8 不让我这么做 无论如何 我都必须设置 out 对象的值 我应该
  • Spring Boot - Websockets - 如何查看订阅者

    我正在开发一个 websocket 应用程序 我试图让一个 websocket 提供信息 然后输出给端点的订阅者 我已经弄清楚了 但我想知道是否有办法查看订阅了哪些订阅者以及订阅了什么路径 这是我正在处理的代码示例 Autowired pr
  • 图灵机的 C 语言实现

    我正在为形式语言理论课程研究图灵机 教授建议运行以下内容算法 http code zhoubot com archives 52详细查看 TM 背后的逻辑 但不起作用 当尝试编译时告诉我以下错误 C Documents and Settin
  • 在 ASP MVC 3 中创建可下载文本文件时无法访问关闭的流

    我试图提示可下载的文本文件 txt 但出现此错误 无法访问关闭的流 我在这里查看了类似的问题 无法访问关闭的流 https stackoverflow com questions 2331675 cannot access closed s
  • Valgrind 和 CUDA:报告的泄漏是真的吗?

    我的应用程序中有一个非常简单的 CUDA 组件 Valgrind 报告了大量泄漏和仍然可达的情况 所有这些都与 cudaMalloc 调用有关 这些泄露是真的吗 我打电话cudaFree对于每一个cudaMalloc 这是 valgrind
  • 需要截断 Razor HTML DisplayFor Helper

    我试图截断一个有时非常大或有时在数据库中为空的文本字段 即 Html DisplayFor modelItem gt item MainBiography 并在末尾替换为三个点 我尝试过 substring 函数 但不断出现错误 任何指点
  • ActiveDirectoryMembershipProvider 与 Azure Active Directory

    我意识到还有其他 首选 方法可以使用 Azure Active Directory 实施身份验证 但是否可以使用标准ActiveDirectory会员提供者 with Azure 活动目录 for an Azure 网站 不能 无法将 Ac
  • 按组求和大于当前值的值

    我测量了不同地块中树木的断面积 这是一个小例子 有两个地块 每个地块有 4 棵树 Plot Tree BasalArea 1 1 4 1 2 5 1 3 7 1 4 3 2 1 4 2 2 6 2 3 9 2 4 5 在每个图中 我想计算基
  • 在 Android 日历中添加事件日期和时间

    我正在尝试在我的 Android 日历事件中添加以下日期和时间 Title and description Events for test Start Date May 05 2012 07 10PM End Date May 06 201
  • 如何选择不包括其子节点的节点的根值?

    我需要访问每个字段的新值 如果存在 和 上一个 值 以确定记录是否有更改 XML 负载示例
  • 如何从WebView获取网页内容?

    在Android上 我有一个WebView正在显示一个页面 如何获取页面源而不再次请求页面 它似乎WebView应该有某种getPageSource 方法返回一个字符串 但可惜它没有 如果我启用 JavaScript 则在此调用中放入适当的
  • 从 lxml.objectify.ObjectifiedElement 中剥离 python 命名空间属性 [重复]

    这个问题在这里已经有答案了 可能的重复 使用lxml时 可以在没有命名空间属性的情况下呈现XML吗 https stackoverflow com questions 5084730 when using lxml can the xml
  • 如何在python中将字符串转换为ip地址

    如何将字符串 ip 地址转换为十进制数 例如我有一个数据字节 b 363 3 1778952384 7076 here 1778952384是我的 IP 地址 7076是我的港口 如何将我的 IP 地址转换为十进制数 下面是我的代码 请帮我
  • 当“玻璃盒”测试导致“更少”测试时,我是否应该使用它?

    例如 我正在针对 CsvReader 编写测试 这是一个简单的类 用于枚举和分割文本行 这只是存在的理由忽略引号内的逗号 它还不到一页 通过 黑盒 测试课程 我检查了诸如 如果文件不存在怎么办 如果我没有该文件的权限怎么办 如果文件包含非
  • Nuget - 打包具有多个项目的解决方案(针对多个框架)

    假设我有以下解决方案 其中包含相同代码的多个版本 每个版本都针对不同的框架 并且我想从中生成一个 nuget 包 SharedLib sln SharedLib Net35 csproj packages config SharedLib
  • 为什么不允许 double 作为非类型模板参数? [复制]

    这个问题在这里已经有答案了 2003 年 是的 2003 Vandervoorde 和 Josuttis 在他们的书 C Templates 第 40 页 中写道 无法使用浮点文字 和简单的常量浮点表达式 作为模板参数有历史原因 由于不存在
  • 有没有办法让 ASP.NET 5 依赖注入在没有引用的情况下解析 DbContext?

    我正在使用 MVC 6 进行一些原型设计 但遇到了困境 我们的项目架构非常简单 数据层 实体框架 6 服务层 类库 引用数据层 表示层 MVC 4 参考服务层 does not参考数据层 我试图使设计尽可能与原始设计相似 即使在阅读 并同意
  • React-toastify 显示多个 toast

    我正在构建一个包含多个组件的 React 应用程序 并且我正在使用其中至少一半的组件React notify除了一个之外 几乎所有这些都可以正常工作 在这个中 当我触发 toast 时 我会得到四个 toast 一个在另一个后面 但我相信它