質問編集履歴
6
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -119,4 +119,21 @@
|
|
|
119
119
|
|
|
120
120
|
```
|
|
121
121
|
|
|
122
|
-
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
### 結果
|
|
125
|
+
```typescript
|
|
126
|
+
const instance = axios.create({
|
|
127
|
+
baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
instance.interceptors.request.use((config) => {
|
|
131
|
+
const token = localStorage.getItem("token");
|
|
132
|
+
config.headers = Object.assign(
|
|
133
|
+
{ Authorization: `Bearer ${token}` },
|
|
134
|
+
config.headers
|
|
135
|
+
);
|
|
136
|
+
return config;
|
|
137
|
+
});
|
|
138
|
+
```
|
|
139
|
+
上のようにaxiosインスタンスに関数を登録するように変更したところ、異常な関数実行はなくなりました。
|
5
画像の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -117,4 +117,6 @@
|
|
|
117
117
|
}, deps);
|
|
118
118
|
};
|
|
119
119
|
|
|
120
|
-
```
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
|
4
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -105,4 +105,16 @@
|
|
|
105
105
|
|
|
106
106
|
export default Index;
|
|
107
107
|
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
```typescript
|
|
111
|
+
// useEffectAsync.ts
|
|
112
|
+
import { useEffect, DependencyList } from "react";
|
|
113
|
+
|
|
114
|
+
export const useEffectAsync = (effect: () => any, deps?: DependencyList) => {
|
|
115
|
+
useEffect(() => {
|
|
116
|
+
effect();
|
|
117
|
+
}, deps);
|
|
118
|
+
};
|
|
119
|
+
|
|
108
120
|
```
|
3
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -78,6 +78,7 @@
|
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
const Index: NextPage<Props> = ({ registeredTags }) => {
|
|
81
|
+
const [addedTags, setAddedTags] = useState<string[]>([]);
|
|
81
82
|
const { quotes, loading } = useQuotes(addedTags);
|
|
82
83
|
const { user, loading: userLoading } = useAuth();
|
|
83
84
|
|
2
表現の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
ローカルストレージからトークンを取得してaxiosクライアントのリクエストヘッダに含める処理をカスタムフックで行なっているのですが、リクエストヘッダの設定処理が１回のページアクセスで200回から300回ほど行われて
|
|
1
|
+
ローカルストレージからトークンを取得してaxiosクライアントのリクエストヘッダに含める処理をカスタムフックで行なっているのですが、リクエストヘッダの設定処理が１回のページアクセスで200回から300回ほど行われてしまいます。
|
|
2
2
|
|
|
3
3
|
`useAxios`はAPIからデータを取得する別のカスタムフックである`useQuotes`で呼び出されています。トップレベルで`useQuotes`が呼び出されているページにアクセスすると上記の問題が生じます。
|
|
4
4
|
|
1
表現の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
ローカルストレージからトークンを取得してaxiosクライアントのリクエストヘッダに含める処理をカスタムフックで行なっているのですが、リクエストヘッダの設定処理が１回のページアクセスで200回から300回ほど行われています。
|
|
1
|
+
ローカルストレージからトークンを取得してaxiosクライアントのリクエストヘッダに含める処理をカスタムフックで行なっているのですが、リクエストヘッダの設定処理が１回のページアクセスで200回から300回ほど行われていしまいます。
|
|
2
2
|
|
|
3
3
|
`useAxios`はAPIからデータを取得する別のカスタムフックである`useQuotes`で呼び出されています。トップレベルで`useQuotes`が呼び出されているページにアクセスすると上記の問題が生じます。
|
|
4
4
|
|