如何在react中使用map循环呈现多个toast

Question

我正在尝试使用.map循环呈现多个祝酒词。但它只是含有循环中最后一个元素的toast。

var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 };
Object.keys(errorCount).map((element, index) => {
if (errorCount[element] > 100) {
console.log(element);
toast.error(
"Message Title: " + element + "nErrors: " + errorCount[element],
{
autoClose: false,
toastId: element,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
}
);
}
});

上述循环应该显示"error2"首先是"error4"。但是它只显示error4.

Answer 1

我已经尝试过这样做，并为我工作。

import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export default function App() {
var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 };
Object.keys(errorCount).map((element, index) => {
if (errorCount[element] > 100) {
console.log(element);
toast.error(
"Message Title: " + element + "nErrors: " + errorCount[element],
{
autoClose: false,
toastId: element,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark"
}
);
}
});
return (
<div className="App">
<ToastContainer />
</div>
);
}

sandbox url - https://codesandbox.io/s/goofy-worker-1d8kwi?file=/src/App.js:0-797