我正在构建一个包含多个组件的 React 应用程序,并且我正在使用其中至少一半的组件React-notify
除了一个之外,几乎所有这些都可以正常工作。在这个中,当我触发 toast 时,我会得到四个 toast,一个在另一个后面,但我相信它们不是不同的 toast,因为它们具有相同的 ID。
我找到了这个线程https://github.com/fkhadra/react-toastify/issues/182 https://github.com/fkhadra/react-toastify/issues/182,这里用户遇到了与我相同的问题,唯一的例外是我没有设置autoclose
,他甚至提供了一张显示问题的 gif:
https://i.stack.imgur.com/SiqRo.jpg https://i.stack.imgur.com/SiqRo.jpg
根据此线程的解决方案将删除所有<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>
)
}
正常工作的组件具有相同的语法。
任何帮助将不胜感激。