添加react-hot-toast 通知插件

package.json

@@ -9,6 +9,7 @@
     "data-struct-js": "^0.0.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1"

src/App.js

@@ -1,4 +1,4 @@
-import React, {useRef, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 
 import Home from "@/page/Home"
 import Exp from "@/page/Exp"
@@ -7,12 +7,14 @@ import { DefaultSpeedDial } from "@/components/DefaultSpeedDial"
 import { DialogDefault } from "@/components/DialogDefault"
 
 import { BrowserRouter, Route, Routes } from "react-router-dom"
-
+import toast, { Toaster } from 'react-hot-toast';
 export default function App() {
   const NotFound = () => {
     return <div>你来到了没有知识的荒原</div>
   }
   return (
+    <>
+      <div><Toaster /></div>
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
@@ -25,6 +27,8 @@ export default function App() {
           <DefaultSpeedDial></DefaultSpeedDial>
         </div>
       </BrowserRouter>
+    </>
+
 
   );
 }

src/components/WolItem.js

@@ -13,6 +13,7 @@ import {
 
 import { useSelector, useDispatch } from 'react-redux'
 import { decrement, increment,wolupdata,delitem } from '@/store/reducers/wolSlice'
+import toast, { Toaster } from 'react-hot-toast';
 
 export default function WolItem(props) {
   const { id, mac, name, updata } = props;
@@ -29,9 +30,10 @@ export default function WolItem(props) {
   const handleClickSendMessage = useCallback(() => {
     if (!isMACAddress(mac)) {
       console.log("mac输入错误");
+      toast.error('mac错误请按照标准填写')
       return;
     }
-    socket.sendMessage('start', {mac}, function () { })
+    socket.sendMessage('start', {mac}, function () { toast.success('已经发送') })
   }, []);
   const deleteItem = useCallback(() => {
     // socket.sendMessage('del', {id}, function () { updata() })

yarn.lock

@@ -4972,6 +4972,11 @@ globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.13"
+  resolved "https://registry.npmmirror.com/goober/-/goober-2.1.13.tgz#e3c06d5578486212a76c9eba860cbc3232ff6d7c"
+  integrity sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -7782,6 +7787,13 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmmirror.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"