回答編集履歴

1

テキスト追加

2021/10/03 05:37

投稿

退会済みユーザー
test CHANGED
@@ -97,3 +97,95 @@
97
97
  }
98
98
 
99
99
  ```
100
+
101
+
102
+
103
+ ### 追記
104
+
105
+
106
+
107
+ > 今度は、別のエラーが発生します
108
+
109
+
110
+
111
+ のほうの対応が抜けとったんで、追記します〜
112
+
113
+
114
+
115
+ 先に書いた、**修正1** と **修正2** のうち、 **修正2** のほうを採用して、`email` および `password` の型を `string | null`  にする方向で修正します。
116
+
117
+
118
+
119
+ まず、以下のように、`LoginState` から、email と password を持つ部分を `Credentials` として、個別のインターフェースとして切り出し、さらに、`keyof Credentials` に `CredentialsProp` という型エイリアスをつけておきます。
120
+
121
+
122
+
123
+ ```diff
124
+
125
+ interface LoginProps {}
126
+
127
+ +
128
+
129
+ +interface Credentials {
130
+
131
+ + email: string | null
132
+
133
+ + password: string | null
134
+
135
+ +}
136
+
137
+ +
138
+
139
+ +type CredentialsProp = keyof Credentials;
140
+
141
+ +
142
+
143
+ interface LoginState {
144
+
145
+ - credentials: {
146
+
147
+ - email: string | any
148
+
149
+ - password: string | any
150
+
151
+ - }
152
+
153
+ + credentials: Credentials
154
+
155
+ isLoading: boolean
156
+
157
+ }
158
+
159
+
160
+
161
+
162
+
163
+ ```
164
+
165
+
166
+
167
+ ほんで、エラーの発生している以下の部分で、`e.target.name` に対して `as`による型アサーションを追加します。
168
+
169
+
170
+
171
+ ```diff
172
+
173
+ handleCredentialsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
174
+
175
+ let { credentials } = this.state
176
+
177
+ - credentials[e.target.name] = e.target.value
178
+
179
+ + credentials[e.target.name as CredentialsProp] = e.target.value
180
+
181
+
182
+
183
+ this.setState({ credentials })
184
+
185
+ }
186
+
187
+ ```
188
+
189
+
190
+
191
+ 以上で質問にあるエラーは消えると思いますわ〜。