我正在构建一个有几个组件的React应用程序，其中至少一半我使用了react-notify，除了一个组件，它在几乎所有组件中都能正常工作。 在这一次中，当我触发祝酒词时，我会得到四个祝酒词，一个在另一个后面，但我相信它们并不是不同的祝酒词，因为它们有相同的ID。

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

https://imgur.com/a/8nmmara

根据这个线程，解决方案是删除所有组件，并将其呈现在app根目录中，在我的示例中是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>
    );
  }
}

下面是正在生成bug的组件的示例:

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。

如有任何帮助，我们将不胜感激。