React/TypescriptとServerless Stackを用いたアプリ開発を行っております。GET APIを使ってdynamodbからユーザー情報を取得したいのですが、console.info('user function', user)
で"undefined"が表示されます。
ただし、vscode's terminalでは以下のように表記されています。
GET /users/aaa@gmail.com 7aefa RESPONSE {"statusCode":200,"body":{"checkinDate":163,"storeName":"test_shop","email":"aaa@gmail.com","name":"aaa"}}
.
Chromeのコンソールでは以下のようにエラーが出ています。
Error: Request failed with status code 500 at createError (createError.js:16) at settle (settle.js:17) at XMLHttpRequest.onloadend (xhr.js:54)
vscodeのターミナルとchromeのconsoleで言っていることが違います。 また、Cloud watchのログをチェックしたのですが、エラーらしきものは見つけることができませんでした。アドバイスや修正点を教えていただければ非常に助かりますので、何卒よろしくお願い致します
UserPage.tsx
tsx
1import React, { useState, useRef, useEffect } from 'react' 2import { useParams } from 'react-router-dom' 3import { API } from 'aws-amplify' 4 5 6const UserPage: React.FC = () => { 7 const [user, setUser] = useState([]) 8 const { id }: { id: string } = useParams() 9 10 useEffect(() => { 11 function loadUser() { 12 return API.get('users', `/users/${id}`) 13 } 14 15 async function onLoad() { 16 try { 17 const user = await loadUser().catch(e => console.error(e)) 18 console.info('user function', user) 19 setUser(user) 20 } catch (e) { 21 console.error(e) 22 } 23 } 24 onLoad() 25 }, [id]) 26 27 return ( 28 <> 29 <h3>user{user}</h3> 30 </> 31 ) 32} 33
getUser.ts
ts
1import handler from "./util/handler"; 2import dynamoDb from "./util/dynamodb"; 3 4export const main = handler(async (event: any) => { 5 const params = { 6 TableName: process.env.TABLE_NAME, 7 Key: { 8 storeName: "test_shop", 9 email: event.pathParameters.id, 10 }, 11 }; 12 13 const result = await dynamoDb.get(params); 14 if (!result.Item) { 15 throw new Error("Item not found."); 16 } 17 18 // Return the retrieved item 19 return result.Item; 20});
handler.ts
ts
1export default function handler(lambda: any) { 2 3 return async function (event: any,context: any){ 4 5 let body, statusCode; 6 7 try { 8 // Run the Lambda 9 body = await lambda(event, context); 10 statusCode = 200; 11 } catch (e: any) { 12 log.error(e); 13 body = { error: e.message }; 14 statusCode = 500; 15 } 16 17 // Return HTTP response 18 return { 19 statusCode, 20 body, 21 }; 22 }; 23}
あなたの回答
tips
プレビュー