reactjs - 带有 setTimeout 的 setState 操作带回已删除的元素

Question

我正在尝试自己在我的项目中制作 toast 通知，我快到了，但我现在有一个小问题。我设置了我的通知并让它在点击时消失。但后来我添加了 setTimeout 以在 5 秒后从我的状态中删除 toast，但它没有按我预期的那样工作。当有一个通知时，它应该正常工作，但是当有多个通知时，它会删除所有的 toast，然后带回除最后一个之外的所有内容。我认为我在 removeToast 函数中的 setState 操作存在问题。

一个一个删除可以正常工作。

代码：

const useToastsContainer = createContainer(() => {
    const [toasts, setToasts] = useState<ToastItem[]>([]);

    useEffect(() => {
        console.log(toasts);
    }, [toasts]);

    const removeToast = (id: string) => {
        setToasts(toasts.filter((item) => item.id !== id));
    };

    const createToast = (type: ToastType, content: string) => {
        const id = v4();
        const toast = {
            id,
            type,
            content,
        };
        setToasts([...toasts, toast]);
        setTimeout(() => {
            removeToast(id);
        }, 5000);
    };

    return {
        toasts,
        removeToast,
        createToast,
    };
});