「マウントされていないコンポーネントで React の状態更新を実行できません。」というエラーについて
Q&AClosed
概要
Reactにて描画についてつまずいております。
該当コード
return cognitoUser ? (<Redirecting />)
: nextAuthState === '' ? <SignUp />
: nextAuthState === 'ConfirmSignUp' ? <Verification />
: <p>想定外</p>
処理内容、ログイン済みであれば、Redirectingを呼び
未登録の場合、SignUpを呼び
2段階認証のメールを確認時にはVerificationを呼ぶといった具合です、
エラー
エラー本文
「Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.」
和訳
「マウントされていないコンポーネントで React の状態更新を実行できません。これはダメですが、アプリケーションのメモリリークを示しています。修正するには、useEffect クリーンアップ関数ですべてのサブスクリプションと非同期タスクをキャンセルしてください。」
（追記)エラーが表示されるタイミング
return cognitoUser ? (<Redirecting />)
: nextAuthState === '' ? <SignUp />
: nextAuthState === 'ConfirmSignUp' ? <Verification /> // ここがtrueになった時
: <p>想定外</p>
エラーが表示されるタイミングとしてからへ描画が変わったタイミングでエラーが表示されます。
質問
useEffectを使用してコンポーネントを返すようにしてみましたが型エラーで上手く書けませんでした。
どのようにすれば良いかアドバイスお願い致します。
追記
SingUpコンポーネントは下記のようになっています。
function SignUp(){
const [email, setEmail] = React.useState<string>('')
const [password, setPassword] = React.useState<string>('')
const [family_name,setFamily_name] = React.useState<string>('')
const [given_name, setGiven_name] = React.useState<string>('')
const changedEmailHandler = (event:any) => setEmail(event.target.value)
const changedPasswordHandler = (event:any) => setPassword(event.target.value)
const changedFnameHandler = (event:any) => setFamily_name(event.target.value)
const changedGnameHandler = (event:any) => setGiven_name(event.target.value)
const signUp = () => {
const attributeList = [
new CognitoUserAttribute({
Name:'email',
Value: email
}),
new CognitoUserAttribute({
Name:'family_name',
Value: family_name
}),
new CognitoUserAttribute({
Name: 'given_name',
Value: given_name
})
]
userPool.signUp(email, password, attributeList, [], (err, result)=> {
if(err) {
console.log(err)
return
}
setNextAuthState('ConfirmSignUp')
setEmail('')
setPassword('')
setFamily_name('')
setGiven_name('')
})
}
return(
<div className="SignUp">
<h1 style={{ textAlign: 'left' }}>SignUp_hey</h1>
<input type="text" placeholder="email" onChange={changedEmailHandler} />
<input type="text" placeholder="password" onChange={changedPasswordHandler} />
<input type="text" placeholder="性" onChange={changedFnameHandler} />
<input type="text" placeholder="名" onChange={changedGnameHandler} />
<button onClick={signUp}>SignUp</button>
</div>
)
}
0