反应通知钩子口吃

Question

我制作了一个用于简单通知类型系统的钩子。但每当我发送垃圾邮件通知时，它就会开始像窃听/抖动一样。

我将在下面给出一个 gif 示例：

好的，让我们开始讨论实际的代码本身：

这是我的反应挂钩：

import { useEffect, useState } from "react";

export default () => {
    const [notifications, setNotifications] = useState([]);  
    const addNotification = (notification) => setNotifications([...notifications, notification]);
    const deleteNotification = (id: number) =>
        setNotifications(notifications.filter((m) => m.id !== id));
  
    return { notifications, addNotification, deleteNotification };
};

这是我的通知项

import { useEffect, useState } from "react";
import '../components/App.css'

  interface INotificationItem {
    notification,
    deleteNotification(id: number): void;
  }
  
  export default (props: INotificationItem) => {
    const { deleteNotification, notification } = props;
    const { id } = notification;
  
    const [alive, setAlive] = useState(true);
    const [fadeOut, setFadeOut] = useState(false);

    useEffect(() => {
      const timer = setTimeout(() => setAlive(false), 2000);
      return () => {
        clearTimeout(timer);
      };
    }, []);
  
    useEffect(() => {
      if (!alive) {
        setFadeOut(true)
        setTimeout(() => {
            deleteNotification(id);
        }, 300)
      }
    }, [alive, deleteNotification, id]);

    return (
    <div className={fadeOut ? "notification top-right-out" : "notification top-right-in"}>
    </div>
    );
  };

最后是我的 app.tsx main文件：

import React, { useState } from 'react';
import './App.css'
import useNotificationManager from '../hooks/useNotificationManager';
import NotificationIItem from '../items/NotificationIItem';

const App: React.FC = (props) => {
    const { addNotification, deleteNotification, notifications } = useNotificationManager();
    const [notificationInd, setNotificationInd] = useState(0);

    const addNotification = () => {
      addNotification({ id: notificationInd});
      setNotificationInd(notificationInd + 1);    
    }


    return (
        <>
        <div className="top-right-in" style={{position: 'fixed', boxSizing: 'border-box'}}>
        <div className="column-wrap top-right-in" style={{display: notifications.length > 0 ? 'flex' : 'none', flexDirection: 'column-reverse'}}>
        {notifications.map((notification) => (
            <NotificationIItem
              deleteNotification={deleteNotification}
              notification={notification}
              key={notification.id}
            />
        ))}
        </div>
        </div>
        </>
    )
}

export default App;

CSS：

.column-wrap {
    transition: transform .6s ease-in-out;
    animation: toast-in-right .7s;
}

@keyframes toast-in-right {
    from {
      transform: translateX(100%);
      
    }
    to {
      transform: translateX(0);
    }
}

@keyframes toast-out-right {
    from {
      transform: translateX(0);
      
    }
    to {
      transform: translateX(100%);
    }
}

.notification-container {
    font-size: 14px;
    box-sizing: border-box;
    position: fixed;
}

.top-right-in {
    top: 12px;
    right: 12px;
    transition: transform .6s ease-in-out;
    animation: toast-in-right .5s;
}

.top-right-out {
    top: 12px;
    right: 12px;
    transition: transform .6s ease-in-out;
    animation: toast-out-right .5s;
}

.notification {
    background: #fff;
    transition: .3s ease;
    position: relative;
    pointer-events: auto;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 30px;
    margin-bottom: 15px;
    width: 300px;
    max-height: 100px;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 10px #999;
    color: #000;
    opacity: .9;
    background-position: 15px;
    background-repeat: no-repeat;
}

我有一种感觉，当它删除通知时，或者当我实际调用它并增加通知索引时，它要么是钩子本身的东西。

不管怎样，我希望有新眼光的人能够看到我可能犯的简单错误。

谢谢，并致以亲切的问候。

Answer 1

我没有你的 CSS 来完全重现这个问题，但即使没有它，我也注意到一些奇怪的渲染问题。

然而，通过使用功能状态更新，这些问题似乎已得到彻底解决。

示例：

const useNotificationManager = () => {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (notification) =>
    setNotifications((notifications) => [...notifications, notification]);

  const deleteNotification = (id: number) =>
    setNotifications((notifications) =>
      notifications.filter((m) => m.id !== id)
    );

  return { notifications, addNotification, deleteNotification };
};

更新

尝试优化这里有一些调整：

1. 删除 alive 状态并调用删除处理程序来处理删除通知。

   const NotificationItem = (props: INotificationItem) =>; {
     const { 删除通知，通知 } = 道具；
     const { id } = 通知；
   
     const [fadeOut, setFadeOut] = useState(false);
   
     useEffect(() => {
       const handleDelete = () =>; {
         setFadeOut(真);
         setTimeout(() => {
           删除通知（id）；
         }, 300);
       };
   
       const 计时器 = setTimeout(handleDelete, 2000);
       返回() => {
         清除超时（计时器）；
       };
     }, []);
   
     返回 （
       
   
         {ID}
       
     ）；
   };
   

2. 使用函数生成id值；删除 notificationInd 状态。

   让 id = 0;
   constgenerateId = () =>; id++；
   

   ...

   const addNotification = () =>; {
     addNotification({ id:generateId() });
   };