我正在构建一个包含多个组件的React应用程序,其中至少有一半使用React-notify
,并且除了一个组件之外,几乎所有组件都能正常工作。在这个组件中,当我触发toast时,我会收到四个toast,一个接一个,但我相信它们不是不同的toast,因为它们具有相同的ID。
我发现这个线程https://github.com/fkhadra/react-toastify/issues/182,这里的用户有同样的问题,我的,唯一的例外是,我没有设置autoclose
,他甚至提供了一个gif显示的问题:
https://imgur.com/a/8NMMaRa
根据这个线程的解决方案是删除所有<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>
)
}
工作正常的组件具有相同的sintax。
任何帮助都将不胜感激。
7条答案
按热度按时间r7xajy2e1#
我也遇到了同样的问题(我的已经不在路由器的范围内了),这可能不能解决根本的问题,但对我来说,有效的方法是添加一个自定义吐司id,也就是change
到
重复的祝酒词也不见了。
lmvvr0a82#
只需将
<ToastContainer />
移出<Layout />
guz6ccqo3#
将
<ToastContainer/>
移动到<Switch>
之外的任意位置,因为:<Switch>
是唯一的,因为它排他地呈现路由。还有:
<Switch>
的所有子元素都应该是<Route>
或<Redirect>
元素。只呈现与当前位置匹配的第一个子元素。参见:https://reacttraining.com/react-router/web/api/Switch
gfttwv5a4#
在你的组件中导入吐司,在那里你已经添加了烤面包机逻辑,例如:
然后在应用程序的根目录中:
abithluo5#
当然,您还必须检查代码在应用程序的不同位置没有多个
<ToastContainer/>
rkkpypqq6#
至
只要使用自定义toastId,它会解决您的问题!
2hh7jdfx7#
把
limit={1}
加到ToastContainer
上,就像这样:参考:https://fkhadra.github.io/react-toastify/limit-the-number-of-toast-displayed/