トップ axiosに関する質問 ESLintエラーの直しかたがわかりません。（react・axsios）

編集履歴

質問編集履歴

編集

2024/09/19 10:13

投稿

shin114

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,7 +2,7 @@
 ReactのLoginPageコンポーネントで、Axiosを用いたPOSTリクエストを実装しています。VSCode上では正常に動作しているのですが、ESLintの実行時に下記のようなエラーが発生します。エラーは、型の安全性に関連しているようです。
 エラーメッセージ:
-![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/38f9d5d0-f01c-4434-99fb-f0356f80aa22.png)
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-19/ae28c6dd-7e12-4cfc-bffc-e55f0ec34404.png)
 状況:
 npm run lintを実行した際に、上記のESLintエラーが表示されます。
 @typescript-eslint/no-unsafe-assignmentや@typescript-eslint/no-unsafe-callといった型安全性に関するルールで引っかかっているようです。
@@ -13,23 +13,36 @@
 エラー箇所において、型アサーションや例外処理などを試しましたが、ESLintの警告を取り除くことができません。
 コードの該当箇所:
-![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/7c90af43-908b-466f-bc93-07f1efdeee2f.png)
 ### 修正版：ヘディングのテキストコードの該当箇所:
 import { Typography } from '@material-tailwind/react';
-import axios, {  AxiosResponse } from 'axios';
+import axios, { AxiosResponse } from 'axios'; // AxiosErrorを追加
 import React, { useState } from 'react';
 import InputCheckboxComponent from '@/components/atoms/input_checkbox';
 import InputTextComponent from '@/components/atoms/input_text';
 import LinkComponent from '@/components/atoms/link';
 import FormCard from '@/components/molecules/formCard';
 import DefaultComponent from '@/components/templates/default';
-import { LoginResponse } from './type';
+// import { LoginResponse } from './type';
+// LoginResponse型の定義
+interface LoginResponse {
+  authorization?: {
+    token: string;
+  };
+}
+// 環境変数の型定義
+declare const process: {
+  env: {
+    REACT_APP_API_URL?: string;
+  };
+};
 export default function LoginPage() {
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState<string>('');
   const API_URL = process.env.REACT_APP_API_URL;
@@ -39,7 +52,7 @@
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
- const formData = new FormData(event.currentTarget);
+    const formData = new FormData(event.currentTarget);
     const password = formData.get('password');
     if (typeof password === 'string') {
@@ -49,8 +62,8 @@
         const response: AxiosResponse<LoginResponse> = await axios.post<LoginResponse>(API_URL, data, {
           headers: { 'Content-Type': 'application/json' },
         });
-        if (response.data.authorization) {
+        if (response.data && 'authorization' in response.data && response.data.authorization) {
-          const token = response.data.authorization.token;
+          const token: string = response.data.authorization.token;
           console.log('Token:', token);
         } else {
           console.error('Invalid response structure');
@@ -80,6 +93,8 @@
 ESLintバージョン: v8.57.0
 TypeScriptバージョン: Version 5.5.3
 axiosバージョン: axios@1.7.7
+reactバージョン:@material-tailwind/react@2.1.9
+│  └─ react@18.2.0
+└─ react@18.3.1

axios TypeScript React.js

修正

2024/09/10 00:28

投稿

shin114

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,6 +16,18 @@
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/7c90af43-908b-466f-bc93-07f1efdeee2f.png)
 ### 修正版：ヘディングのテキストコードの該当箇所:
+import { Typography } from '@material-tailwind/react';
+import axios, {  AxiosResponse } from 'axios';
+import React, { useState } from 'react';
+import InputCheckboxComponent from '@/components/atoms/input_checkbox';
+import InputTextComponent from '@/components/atoms/input_text';
+import LinkComponent from '@/components/atoms/link';
+import FormCard from '@/components/molecules/formCard';
+import DefaultComponent from '@/components/templates/default';
+import { LoginResponse } from './type';
 export default function LoginPage() {
   const [email, setEmail] = useState('');
@@ -27,8 +39,7 @@
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const formData = new FormData(event.currentTarget);
+ const formData = new FormData(event.currentTarget);
     const password = formData.get('password');
     if (typeof password === 'string') {
@@ -38,7 +49,6 @@
         const response: AxiosResponse<LoginResponse> = await axios.post<LoginResponse>(API_URL, data, {
           headers: { 'Content-Type': 'application/json' },
         });
         if (response.data.authorization) {
           const token = response.data.authorization.token;
           console.log('Token:', token);

axios TypeScript React.js

コード追加

2024/09/09 00:27

投稿

shin114

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -16,7 +16,48 @@
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/7c90af43-908b-466f-bc93-07f1efdeee2f.png)
 ### 修正版：ヘディングのテキストコードの該当箇所:
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const API_URL = process.env.REACT_APP_API_URL;
+  if (!API_URL) {
+    throw new Error('API URL is not defined in the environment variables');
+  }
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const password = formData.get('password');
+    if (typeof password === 'string') {
+      const data = { email, password };
+      console.log(data);
+      try {
+        const response: AxiosResponse<LoginResponse> = await axios.post<LoginResponse>(API_URL, data, {
+          headers: { 'Content-Type': 'application/json' },
+        });
+        if (response.data.authorization) {
+          const token = response.data.authorization.token;
+          console.log('Token:', token);
+        } else {
+          console.error('Invalid response structure');
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
-![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-09/4dde462c-5194-4b80-aa04-ca90624a8659.png)
+          console.error('Axios error:', error.response?.data ?? 'No response data');
+        } else if (error instanceof Error) {
+          console.error('Unexpected error:', error.message);
+        } else {
+          console.error('An unknown error occurred');
+        }
+      }
+    } else {
+      console.error('Password is not valid');
+    }
+  };
 質問:
 このエラーはどのように対処すればよいのでしょうか？

axios TypeScript React.js

写真追加

2024/09/08 15:02

投稿

shin114

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -15,6 +15,8 @@
 コードの該当箇所:
 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/7c90af43-908b-466f-bc93-07f1efdeee2f.png)
+### 修正版：ヘディングのテキストコードの該当箇所:
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-09/4dde462c-5194-4b80-aa04-ca90624a8659.png)
 質問:
 このエラーはどのように対処すればよいのでしょうか？

axios TypeScript React.js

写真に変更

2024/09/08 11:11

投稿

shin114

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,11 +2,7 @@
 ReactのLoginPageコンポーネントで、Axiosを用いたPOSTリクエストを実装しています。VSCode上では正常に動作しているのですが、ESLintの実行時に下記のようなエラーが発生します。エラーは、型の安全性に関連しているようです。
 エラーメッセージ:
-./components/pages/login/login.tsx
-33:15  Error: Unsafe assignment of an error typed value.  @typescript-eslint/no-unsafe-assignment
-33:62  Error: Unsafe call of an `error` type typed value.  @typescript-eslint/no-unsafe-call
-33:68  Error: Unsafe member access .post on an `error` typed value.  @typescript-eslint/no-unsafe-member-access
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/38f9d5d0-f01c-4434-99fb-f0356f80aa22.png)
 状況:
 npm run lintを実行した際に、上記のESLintエラーが表示されます。
 @typescript-eslint/no-unsafe-assignmentや@typescript-eslint/no-unsafe-callといった型安全性に関するルールで引っかかっているようです。

axios TypeScript React.js

写真に変えた

2024/09/08 11:10

投稿

shin114

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -17,27 +17,8 @@
 エラー箇所において、型アサーションや例外処理などを試しましたが、ESLintの警告を取り除くことができません。
 コードの該当箇所:
-try {
-  const response: AxiosResponse<LoginResponse> = await axios.post<LoginResponse>(API_URL, data, {
+![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/7c90af43-908b-466f-bc93-07f1efdeee2f.png)
-    headers: { 'Content-Type': 'application/json' },
-  });
-  if (response.data.authorization) {
-    const token = response.data.authorization.token;
-    console.log(`Token: ${token}`);
-  } else {
-    console.error('Invalid response structure');
-  }
-} catch (error) {
-  if (axios.isAxiosError(error)) {
-    const axiosError = error as AxiosError<LoginResponse>;
-    console.error('Axios error:', axiosError.response?.data ?? 'No response data');
-  } else if (error instanceof Error) {
-    console.error('Unexpected error:', error.message);
-  } else {
-    console.error('An unknown error occurred');
-  }
-}
 質問:
 このエラーはどのように対処すればよいのでしょうか？

axios TypeScript React.js