React-toastify：遍历对象数组逐个展示Toast的实现方法

云上老周

2026-8-11

React-toastify 实现逐个对象弹出Toast

要实现点击按钮后为数组中每个对象单独弹出Toast，核心是遍历数组并为每个元素单独调用toast()方法，具体修改如下：

核心代码修改

原来的逻辑是将所有name拼接后弹出单个Toast，现在改为遍历数组，逐个触发Toast：

// 替换原点击事件处理函数
const handleClick = () => {
  // 遍历你的对象数组
  yourArray.forEach(item => {
    // 为每个对象弹出独立Toast，替换"指定文本"为你需要的内容
    toast(`指定文本：${item.name}`);
  });
};

优化：避免重复Toast（可选）

如果需要防止同一对象重复触发时覆盖已有Toast，可以利用对象的唯一id作为toastId配置项：

const handleClick = () => {
  yourArray.forEach(item => {
    toast(`指定文本：${item.name}`, {
      toastId: item.id, // 用对象唯一id标识Toast，避免重复覆盖
      autoClose: 3000, // 可选：设置自动关闭时间（毫秒）
      position: toast.POSITION.TOP_RIGHT // 可选：设置Toast显示位置
    });
  });
};

完整示例代码

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useState } from 'react';

function App() {
  // 示例对象数组
  const [items] = useState([
    { id: 1, name: '商品A' },
    { id: 2, name: '商品B' },
    { id: 3, name: '商品C' }
  ]);

  const handleTriggerToasts = () => {
    items.forEach(item => {
      toast(`已选中：${item.name}`, {
        toastId: item.id
      });
    });
  };

  return (
    <div className="App">
      <button onClick={handleTriggerToasts}>逐个弹出Toast</button>
      {/* 必须渲染ToastContainer组件才能显示Toast */}
      <ToastContainer />
    </div>
  );
}

export default App;