react-toastify使用SSR显示两次

Question

Warning: Expected server HTML to contain a matching text node for "nz6teoigav" in <div>.

这会导致toast组件渲染两次。

在_app.tsx中，我添加了<ToastContainer position='top-center' newestOnTop={true} limit={1} />

然后，我可以在不同的组件中调用toast.error('error')

Answer 1

没有看到问题的例子，这是一个猜测游戏。也就是说，这里有一个使用react-toastify和NextJS的工作代码和工具箱，你可以在你的项目中使用/引用它：

Codesandbox Source

Working Codesandbox Demo

上面的例子使用了一个定制的toast函数来改变消息的外观，但是它的完全是可选的，并且仅用于演示目的。