reactjs React-toastify显示多个吐司

ctehm74n  于 2023-02-22  发布在  React
关注(0)|答案(7)|浏览(171)

我正在构建一个包含多个组件的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。
任何帮助都将不胜感激。

r7xajy2e

r7xajy2e1#

我也遇到了同样的问题(我的已经不在路由器的范围内了),这可能不能解决根本的问题,但对我来说,有效的方法是添加一个自定义吐司id,也就是change

toast.success('Produto removido com sucesso')

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

重复的祝酒词也不见了。

lmvvr0a8

lmvvr0a82#

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

guz6ccqo

guz6ccqo3#

<ToastContainer/>移动到<Switch>之外的任意位置,因为:
<Switch>是唯一的,因为它排他地呈现路由。
还有:
<Switch>的所有子元素都应该是<Route><Redirect>元素。只呈现与当前位置匹配的第一个子元素。
参见:https://reacttraining.com/react-router/web/api/Switch

gfttwv5a

gfttwv5a4#

在你的组件中导入吐司,在那里你已经添加了烤面包机逻辑,例如:

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

abithluo5#

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

rkkpypqq

rkkpypqq6#

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,它会解决您的问题!

2hh7jdfx

2hh7jdfx7#

limit={1}加到ToastContainer上,就像这样:

<ToastContainer limit={1}>

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

相关问题