React中使用map循环渲染多个Toast仅显示最后一个的问题

我遍历错误计数对象，当错误数大于100时调用toast.error()弹出提示，预期会显示error2和error4两个弹窗，但实际只出现最后一个error4的弹窗。

代码如下：

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

原因分析 #

多数toast库（如react-toastify）在同步事件循环中连续调用弹窗方法时，会因内部渲染机制限制，导致前一次弹窗请求被后一次覆盖，无法同时触发多个弹窗。即便设置了唯一toastId，同步执行的顺序也会让库来不及完成前一个弹窗的创建就被下一个请求打断。

解决办法 #

把每个弹窗调用放进异步任务队列，让它们依次执行，避免同步阻塞。用setTimeout实现即可，同时将map换成更合适的forEach（无需返回新数组）：

var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 };
Object.keys(errorCount).forEach((element) => {
  if (errorCount[element] > 100) {
    // 用setTimeout将弹窗调用放入宏任务队列
    setTimeout(() => {
      toast.error(
        `Message Title: ${element}\nErrors: ${errorCount[element]}`,
        {
          autoClose: false,
          toastId: element,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "dark",
        }
      );
    }, 0);
  }
});

如果使用react-toastify，还可以检查ToastContainer的配置，确保没有设置limit: 1这类限制弹窗数量的属性（默认允许多个弹窗）。

内容的提问来源于stack exchange，提问作者Ihtisham