NextJS 组件淡化已删除的组件

Question

因此，我正在使用 NextJS 和 tailwind 为我的应用程序创建一个通知提供程序，但是当我显示多个通知并且最上面的通知被删除时，下面的通知将接管它的淡入淡出值，我该如何解决这个问题？

import { createContext, useState, useContext } from "react";

const Context = createContext();

const Provider = ({ children }) => {
    const [notifications, setNotifications] = useState([]);

    const exposed = {
        addNotification: (type, text, autoClose) => {
            const id = Math.random()
            setNotifications(notifications => [...notifications, { id, type, text, autoClose, fade: false }]);
            if (autoClose) {
                setTimeout(() => {
                    removeNotification(id);
                }, 5000);
            }
        },
    };

    const removeNotification = (id) => {
        setNotifications(notifications => notifications.map(n => n.id === id ? { ...n, fade: true } : n));
        setTimeout(() => {
            setNotifications(notifications => notifications.filter(n => n.id !== id));
        }, 1000);
    }

    return (
        <Context.Provider value={exposed}>
            {children}
            {notifications.length > 0 ? <div className="z-50 fixed top-5 right-5 text-right">
                {notifications.map((notification, index) => {
                    switch (notification.type) {
                        case 'info':
                            return <Info text={notification.text} key={index} remove={() => removeNotification(notification.id)} fade={notification.fade} />
                        /* other cases */
                    }
                })}
            </div> : null}
        </Context.Provider>
    );
}

function Info({ remove, text, fade }) {
    return (
        <div className={`flex items-center w-fit mt-2 mr-0 ml-auto transition-opacity ease-in duration-1000 ${!fade?'opacity-100':'opacity-0'}`}>
            {/* content */}
        </div>
    )
}

export const useProvider = () => useContext(Context);

export default Provider;

Answer 1

可能还有其他问题需要解决，但对于具有动态变化项目的列表，请考虑避免使用index作为唯一键，以防止列表变化时可能发生冲突。

也许尝试在发布的示例中使用notification.id作为键：

<Context.Provider value={exposed}>
  {children}
  {notifications.length > 0 ? (
    <div className="z-50 fixed top-5 right-5 text-right">
      {notifications.map((notification, index) => {
        switch (notification.type) {
          case "info":
            return (
              <Info
                text={notification.text}
                // 👇 Use id as unique keys
                key={notification.id}
                remove={() => removeNotification(notification.id)}
                fade={notification.fade}
              />
            );
          /* other cases */
        }
      })}
    </div>
  ) : null}
</Context.Provider>