Estoy creando una aplicación React con varios componentes y en al menos la mitad de ellos estoy usando React-notify y está funcionando correctamente en casi todos, excepto en uno. En este, cuando disparo la tostada, obtengo cuatro tostadas, una detrás de la otra, pero creo que no son diferentes, ya que tienen la misma ID.

Encontré este hilo https://github.com/fkhadra/react-toastify/issues/ 182, aquí el usuario tenía el mismo problema que el mío, la única excepción es que no estoy configurando autoclose, incluso proporcionó un gif que muestra el problema:

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

La solución de acuerdo con este hilo sería eliminar todos los <ToastContainer /> de los componentes y representarlos en la raíz de la aplicación, que en mi caso es App.js. Lo hice, sin embargo, las tostadas ya no se muestran, aunque no sé si lo he hecho bien.

Además de eso, también traté de establecer una identificación personalizada y no cambió nada.

Estoy usando React-router-dom, tal vez esto está influyendo en algo, no pude encontrar una respuesta adecuada ni en la documentación ni en ninguna otra fuente.

Aquí está la versión simplificada de mi 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>
    );
  }
}

Aquí hay una muestra del componente cuyo error se está generando:

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

}

Los componentes que funcionan correctamente tienen el mismo sintaxe.

Cualquier ayuda será muy apreciada.

1
Berg_Durden 25 jun. 2020 a las 17:47

2 respuestas

La mejor respuesta

Simplemente mueva <ToastContainer /> fuera de <Layout />

3
demkovych 25 jun. 2020 a las 14:56

Mueva el <ToastContainer/> a cualquier lugar fuera de <Switch>, porque:

<Switch> es único porque representa una ruta exclusivamente.

Además:

Todos los elementos secundarios de un <Switch> deben ser elementos <Route> o <Redirect>. Solo se representará el primer elemento secundario que coincida con la ubicación actual.

Ver: https://reacttraining.com/react-router/web/api/Switch

1
Guillermo Gutiérrez 25 jun. 2020 a las 15:07