localhost geht hop-fly nicht

src/components/Dog.tsx

@@ -1,15 +1,47 @@
-import React from 'react'
-import { useParams, useSearchParams } from "react-router-dom";
+import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import React, { useContext, useState } from 'react'
+import { useParams } from "react-router-dom";
+import Img from './Img';
+import DogNameTxt from './DogNameTxt';
 
-export default function Dog() 
+const Dog = () => 
 {
+  const {getDog, dog} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+
+  // m7MdMK
   const params = useParams();
-  const searchParams = useSearchParams();
+  const qr_id = Object.values(params)[0];
+  var data;
+  var needData = dog.success === undefined;
+  if(needData)
+  {
+    data = getDog(qr_id); // await not allowed?! => workaraound
+  }
+  var email = "nicht definiert;"
+  var phone = "nicht definiert;"
+  var picPath = "nicht definiert;"
+  var qrPath = "nicht definiert;"
+  var name = "nicht definiert;"
+  if(dog.success === 1)
+  {
+    name = dog.data.name;
+    qrPath = dog.data.qr_code;
+    picPath = dog.data.picture;
+    email = dog.data.email;
+    phone = dog.data.phone;
+  }
+
   return (
     <div>
-      <h1>Dog</h1>
-      <p>{Object.keys(params)[0]}: {Object.values(params)[0]}</p>     
-      <p>{Object.keys(params)[1]}: {Object.values(params)[1]}</p>     
+      <h1>Hast Du mich gefunden?</h1>
+      {/* <p>name: {name}</p>
+      <p>email: {email}</p>
+      <p>phone: {phone}</p>
+      <p>pic: {picPath}</p>
+      <p>qr: {qrPath}</p> */}
+      <Img pth={picPath} />
+      <DogNameTxt name={name} email={email} phone={phone} />
     </div>
   )
-}
+}
+export default Dog;