反应吐司显示多个吐司

Question

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

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

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>
)
}

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

任何帮助将不胜感激。

Answer 1

我遇到了同样的问题(而且我已经在路由器之外了(。这可能无法解决根本问题，但对我有用的是添加一个自定义 toast id，即更改

toast.success('Produto removido com sucesso')

自

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

重复的祝酒词不再出现。

Answer 2

只需将<ToastContainer />移出<Layout />

Answer 3

将<ToastContainer/>移动到<Switch>之外的任何位置，因为：

<Switch>的独特之处在于它以独占方式呈现路由。

也：

<Switch>的所有子元素都应是<Route>或<Redirect>元素。将仅呈现与当前位置匹配的第一个子项。

请参阅： https://reacttraining.com/react-router/web/api/Switch

Answer 4

在组件中导入 toast，其中添加了 toaster 逻辑，如下所示：

import { toast } from 'react-toastify';
// avoid the ToastContainer to add here and the css as well

然后在应用程序的根目录下：

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const CommonComponent = () => (
<div>
<ToastContainer />
<OtherComponent />
</div>
)

Answer 5

您还必须检查您的代码在应用程序的不同位置没有多个<ToastContainer/>

Answer 6

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')
}
}

自

const notify = (arg) => {
if (arg === 'excluído') {
toast.success('Produto removido com sucesso', {
toastId: "success"        
})

} else if (arg === 'não excluído') {
toast.error('Erro ao tentar remover produto', {
toastId: "error"        
})
}
}

只需使用自定义 ToastId，它将解决您的问题！

Answer 7

只需将limit={1}添加到ToastContainer即可。喜欢这个：

<ToastContainer limit={1}>

参考： https://fkhadra.github.io/react-toastify/limit-the-number-of-toast-displayed/

Answer 8

add toastId：

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