使用hook读取图片

.eslintcache

@@ -1 +1 @@
-[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7"},{"size":500,"mtime":1608887700017,"results":"8","hashOfConfig":"9"},{"size":425,"mtime":1608882568140,"results":"10","hashOfConfig":"9"},{"size":578,"mtime":1608950253899,"results":"11","hashOfConfig":"9"},{"size":196,"mtime":1608886679432,"results":"12","hashOfConfig":"9"},{"size":717,"mtime":1608950399012,"results":"13","hashOfConfig":"9"},{"size":777,"mtime":1608947625775,"results":"14","hashOfConfig":"9"},{"size":542,"mtime":1608949914236,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"46l3t",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["31","32"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",["33"],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","severity":1,"message":"39","line":2,"column":8,"nodeType":"40","messageId":"41","endLine":2,"endColumn":13},"no-native-reassign",["42"],"no-negated-in-lhs",["43"],"@typescript-eslint/no-unused-vars","'React' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
+[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"8"},{"size":500,"mtime":1608887700017,"results":"9","hashOfConfig":"10"},{"size":425,"mtime":1608882568140,"results":"11","hashOfConfig":"10"},{"size":909,"mtime":1608965553659,"results":"12","hashOfConfig":"10"},{"size":196,"mtime":1608886679432,"results":"13","hashOfConfig":"10"},{"size":717,"mtime":1608950399012,"results":"14","hashOfConfig":"10"},{"size":777,"mtime":1608947625775,"results":"15","hashOfConfig":"10"},{"size":535,"mtime":1608965352064,"results":"16","hashOfConfig":"10"},{"size":483,"mtime":1608965723456,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"46l3t",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["35","36"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",["37"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["38"],{"ruleId":"39","replacedBy":"40"},{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","severity":1,"message":"44","line":24,"column":31,"nodeType":"45","endLine":24,"endColumn":75},{"ruleId":"46","severity":1,"message":"47","line":14,"column":8,"nodeType":"48","endLine":14,"endColumn":10,"suggestions":"49"},"no-native-reassign",["50"],"no-negated-in-lhs",["51"],"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.","ArrayExpression",["52"],"no-global-assign","no-unsafe-negation",{"desc":"53","fix":"54"},"Update the dependencies array to be: [url]",{"range":"55","text":"56"},[415,417],"[url]"]

package-lock.json

@@ -3016,6 +3016,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.1.tgz",
       "integrity": "sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^12.19.11",
     "@types/react": "^16.14.2",
     "@types/react-dom": "^16.9.10",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

src/App.tsx

@@ -3,16 +3,25 @@ import './App.css';
 import LikeButton from './components/LikeButton';
 import MouseTracker from './components/MouseTracker';
 import useMousePosition from './hooks/useMousePosition';
+import useURLLoader from './hooks/useURLLoader';
+
+interface IShowResult {
+  message: string;
+  status: string;
+}
 
 const App: React.FC = () => {
   const [show, setShow] = useState(true);
   const position = useMousePosition();
+  const [data, loading] = useURLLoader("https://dog.ceo/api/breeds/image/random");
+  const dogResult = data as IShowResult;
   return (
     <div className="App">
       <LikeButton />
       {show && <MouseTracker />}
-      <p><button onClick={()=>{setShow(!show)}}>toogle</button></p>
+      <p><button onClick={() => { setShow(!show) }}>toogle</button></p>
       <p>X: {position.x}, Y: {position.y}</p>
+      <p>{loading ? `小狗读取中` : <img src={dogResult && dogResult.message} />}</p>
     </div>
   );
 }

src/hooks/useMousePosition.tsx

@@ -1,5 +1,5 @@
 
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 
 const useMousePosition = () => {

src/hooks/useURLLoader.tsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const useURLLoader = (url: string, deps: any[] = []) => {
+    const [data, setData] = useState<any>(null)
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        setLoading(true);
+        axios.get(url).then(result => {
+            setData(result.data);
+            setLoading(false);
+        });
+    }, []);
+    return [data, loading];
+}
+
+export default useURLLoader;