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 的相关文章

  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 使用 Google 日历源时如何禁用 FullCalendar 中的活动链接?

    我正在使用 FullCalendar 库从 Google 日历加载日历中的事件 不幸的是 事件添加到日历后 它们是可点击的 当您点击该活动时 您会自动重定向到 Google 日历页面以查看该特定活动 或者如果您有足够的访问权限 则可以直接对
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

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

    这个问题在这里已经有答案了 我有一个带有文本区域的表单 我想将输入中的换行符更改为段落 使用 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 一个在另一个后面 但我相信它