#author("2023-02-27T13:22:20+09:00","default:ryuichi","ryuichi")
#author("2023-02-27T13:23:28+09:00","default:ryuichi","ryuichi")
* useEffectとtry-catchの例外処理 [#sbacfd64]
** try-catchの中でuseEffectを使う [#j84da585]
*** 間違った例 [#uee49385]
const App = () => {
try {
useEffect(() => {
throw new Error('My Error');
});
} catch (e) {
console.log('DEBUG: ' + e.message);
}
return <div>My App</div>;
};
- 上の例ではcatchの中は実行されない
- なぜなら、useEffectの中の処理はコンポーネントがレンダーされた後に実行されるから
- つまり、Appコンポーネントがマウント（レンダー）されると、tryの中のuseEffectは実行されるが中の処理が実行されることなく（例外がthrowされることなく）、returnの行まで処理が進み、My Appがレンダーされる
- レンダーされた後に、useEffectの中が実行されて例外がthrowされるが、この例外はcatchされない
*** 正しい例 [#p98e1aa8]
const App = () => {
try {
useEffect(() => {
try {
throw new Error('My Error');
} catch (e) {
console.log('DEBUG2: ' + e.message);
}
});
} catch (e) {
console.log('DEBUG: ' + e.message);
}
return <div>My App</div>;
};
- このように書くとuseEffectの中の例外がcatchされて '''DEBUG2: My Error''' のログを確認できる
