useEffectとtry-catchの例外処理

try-catchの中でuseEffectを使う

間違った例

 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されない

正しい例

 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 のログを確認できる

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2023-02-27 (月) 13:23:28