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

以下是正在生成其错误的componente的示例：

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

}

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

任何帮助将不胜感激。

Answer 1

只需将<ToastContainer />从<Layout /> 之外移出

Answer 2

将<ToastContainer/>移到<Switch>之外的任何地方，因为：

<Switch>的独特之处在于它专门呈现一条路由。

也：

<Switch>的所有子代应为<Route>或<Redirect>元素。将仅显示与当前位置匹配的第一个孩子。

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

Answer 3

在您添加了烤面包机逻辑的组件中导入烤面包机。下面给出：

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显示多个吐司

3 个答案: