Javascript 表现出多个吐司

我正在构建一个包含多个组件的React应用程序，其中至少有一半使用了

React notify

，除一个组件外，几乎所有组件都能正常工作。在这一次，当我触发烤面包时，我得到四个烤面包，一个接一个，但我相信它们不是不同的烤面包，因为它们有相同的ID

我发现了这个线程，这里的用户与我的问题相同，唯一的例外是我没有设置

autoclose

，他甚至提供了一个gif显示问题：

根据这个线程的解决方案是删除所有组件的

，并在app root中呈现它，在我的例子中是

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

从“./containers/Layout/Layout”导入布局；
从'react toastify'导入{toastcainer}；
导入“react-toastify/dist/react-toastify.css”；
从“react router dom”导入{BrowserRouter，Route，Switch}；
类应用程序扩展组件{
render（）{
返回(
);
}
}

下面是正在生成错误的组件的示例：

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

}

从“React”导入React；
从“../../../axios”导入axios；
从'react toastify'导入{toast}；
const listarProdutosItens=props=>{
const excluirItemHandler=i=>{
让key=props.listaItens[i].key
设categoria=props.listaItens[i].categoria
delete（`/adm/${categoria}/${key}.json`）
。然后（res=>{
props.fetchLista（）
通知（'excluído'）
})
.catch（错误=>notify（'não excluído'））
}
const notify=（arg）=>{
如果（arg=='excluído'）{
toast.success（'Produto removido com successo'）
console.log（'TESTE'）
}else if（arg=='não excluído'）{
toast.error（'Erro ao tentar remover produto'）
}
}
返回(
excluirItemHandler（i）}>
{/*  */}
)
}

正常工作的部件具有相同的轴

任何帮助都将不胜感激。
只需将
移到
以外的任何地方，因为：

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

此外：

的所有子元素都应该是
或
元素。仅渲染与当前位置匹配的第一个子级

请参阅：
在添加了烤面包机逻辑的组件中导入烤面包机，如下所示：

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

从'react toastify'导入{toastcainer}；
导入“react-toastify/dist/react-toastify.css”；
常量CommonComponent=（）=>(
)
离开我不相信。这么简单，我看不见。非常感谢，效果很好。如果你想编辑你的评论作为回答，我很乐意接受。谢谢。这真的很有道理。