React-toastify 显示多个吐司

Question

我正在构建一个包含多个组件的 React 应用程序，其中至少有一半我正在使用 React-notify 并且它在几乎所有组件中都可以正常工作，除了一个。在这一个中，当我触发吐司时，我得到了四个吐司，一个在另一个之后，但我相信它们不是不同的吐司，因为它们具有相同的 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>
    )

}

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

任何帮助将不胜感激。

原文由 Berg_Durden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将 --- 移到 --- <Layout /> <ToastContainer /> 之外

原文由 demkovych 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

toast.success('Produto removido com sucesso')

至

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

并且不再出现重复的吐司。

原文由 Klaus Haukenstein 发布，翻译遵循 CC BY-SA 4.0 许可协议