ã€React in TypeScript】ErrorBoundariesã®ä½¿ç”¨æ–¹æ³•ã¨æ³¨æ„点
ErrorBoundariesã¨ã¯åå«è¦ç´ ã§ç™ºç”Ÿã—ãŸã‚¨ãƒ©ãƒ¼ã®å‡¦ç†ã‚’ã™ã‚‹ãŸã‚ã«ä½œæˆã•ã‚ŒãŸã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã§ã™ã€‚エラー発生ã—ãŸã“ã¨ã‚’ユーザーã«çŸ¥ã‚‰ã›ãŸã‚Šã€ã‚¨ãƒ©ãƒ¼ãƒã‚°ã‚’作æˆã—ãŸã‚Šã™ã‚‹ãŸã‚ã«ä½¿ç”¨ã—ã¾ã™ã€‚ã“ã®è¨˜äº‹ã§ã¯ErrorBoundariesコンãƒãƒ¼ãƒãƒ³ãƒˆã®ä½¿ã„方・ユースケース・使用ã®éš›ã®æ³¨æ„点ã«ã¤ã„ã¦è§£èª¬ã—ã¦ã„ã¾ã™ã€‚
React ã§è¶…絶楽ã«ã‚¨ãƒ©ãƒ¼ç”»é¢ã‚’出ã›ã‚‹ã‚ˆ - Qiita
ã“ã‚“ã«ã¡ã¯ã€‚ã¬ã“ã™ã‘ã§ã™ã€‚ 皆ã•ã‚“㯠React ã§ã‚¨ãƒ©ãƒ¼ç”»é¢ã‚’出ã™æ™‚ã©ã†ã—ã¦ã„ã¾ã™ã‹ï¼Ÿ ãŠãらãã€ã“ã‚“ãªæ„Ÿã˜ã§é ‘å¼µã£ã¦ã„ã‚‹ã‚“ã˜ã‚ƒãªã„ã‹ã¨æ€ã„ã¾ã™ã€‚ function MyWidget() { const [isError, setIsError] = useState(false); useEffect(() => { // 何ã‹ã—らデータをå–å¾—ã™ã‚‹å‡¦ç† fetchSomething() .then(() => { // データã®å–å¾—ã«æˆåŠŸã—ãŸæ™‚ã®å‡¦ç† }) .catch(() => { setIsError(true); }) }, []) if (isError) { return <div>エラーã§ã™</div> } return <div>æ£å¸¸ã§ã™</div> } ã„ãŸã£ã¦æ™®é€šã®ã‚³ãƒ¼ãƒ‰ã§ã™ã€‚ ãŒã€ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã”ã¨ã§ã“ã®ã‚ˆã†ãªã‚¨ãƒ©ãƒ¼ã®ãŸã‚ã®å‡¦ç†ã‚’書ã„ã¦ã„ãã®ã¯æ‰‹é–“ãŒã‹ã‹ã‚Šã¾ã™ã€‚
1
ãŠçŸ¥ã‚‰ã›
障害
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}