ErrorBoundary

src/App.jsx

@@ -1,68 +1,113 @@
-import React, { useState, useReducer, useRef, memo } from 'react'
+import React from 'react'
 
-function tasksReducer(state, action) {
+class ErrorBoundary extends React.Component {
-    switch(action.type) {
+    constructor(props) {
-        case 'ADD_TASK':
+        super(props);
-            return [...state, action.payload]
+        this.state = {hasError: false};
-        case 'TOGGLE_TASK':
-            return state.map(task => task.id === action.payload ? {...task, complite: !task.complite} : task)
-        case 'REMOVE_TASK':
-            return state.filter(task => task.id !== action.payload)
-        default:
-            return state
-    }
     }
     
-const TaskList = memo(function TaskList({tasks, onToggle, onRemove}) {
+    static getDerivedStateFromError(error) {
-    console.log("Rendred")
+        return { hasError: true }
+    }
+    
+    componentDidCatch(error,info) {
+        console.log(error,info);
+    }
+    
+    handlerReset = () => {
+        this.setState({hasError: false});
+    }
+    
+    render() {
+        if (this.state.hasError) {
             return (
-        <ul>
+                <div>
-        {tasks.map(({id, text, complite}) => (
+                    <h1>Что то поломалось</h1>
-                <li key={id}
+                    <button onClick={this.handlerReset}>Повторить</button>
-                    style={{textDecoration: complite ? 'line-through' : 'none' }}>
+                </div>)
-                    <input type="checkbox" checked={complite} onChange={()=>onToggle(id)} />
+        }
-                    {text}
+        return this.props.children;
-                    <button onClick={()=> onRemove(id)} style={{marginLeft: 10}}>
+    }
-                        Удалить
+}
-                    </button>
+
-                </li>
+class AdvancedErrorBoundary extends React.Component {
-            ))}
+    constructor(props) {
-        </ul>
+        super(props);
+        this.state = {
+            hasError: false,
+            error: null,
+            errorInfo: null
+        }
+    }
+    
+    static getDerivedStateFromError(error) {
+        return { hasErorr: true }
+    }
+    
+    componentDidCatch(error, info) {
+        this.setState({ 
+            error: error,
+            errorInfo: info
+        })
+    }
+    
+    handleReset = () => {
+        this.setState({
+            hasError:false,
+            error: null,
+            errorInfo:null
+        });
+    }
+    
+    render() {
+        if(this.state.hasError) {
+            console.log('Error');
+            return (
+                <div>
+                    <h2>Произошла ошибка</h2>
+                    <p>Извеняемся, работаем, исправляем. Разработчика привязали к батарее</p>
+                    <button onClick={this.handleReset}>Попробовать снова</button>
+                </div>
             )
-})
-
-function App() {
-    const [tasks, dispatch] = useReducer(tasksReducer,[])
-    const [input,setInput] = useState('')
-    const [error,setError] = useState('')
-    const inputRef = useRef(null)
-    
-    const addTask = () => {
-        if (input.trim() === '') {
-            setError('Пустой текст задачи')
-            return
         }
-        setError('')
+        //Если ошибок нет, то рендрим дочерние объекты
-        dispatch({
+        return this.props.children
-            type: 'ADD_TASK',
+    }
-            payload: {id: Date.now(), text: input.trim(), complite: false }
-        })
-        setInput('')
-        inputRef.current.focus()
 }
 
+function ProblemComponent() {
+    const [counter,setCounter] = React.useState(0)
+    
+    const handlerClick = () => setCounter(counter + 1)
+    
+    React.useEffect(() => {
+        if (counter > 5) {
+            throw new Error("Ошибка в компоненте");
+        }
+    },[counter]);
     return (
-		<div style={{padding: 20}}>
+        <div>
-			<h1>Список дел</h1>
+            <h2>Счетчик: {counter}</h2>
-			<input ref={inputRef} value={input} onChange={e => setInput(e.target.value)} />
+            <button onClick={handlerClick}>Прибавить</button>
-			<button onClick={addTask}>Добавить</button>
-            {error && <p style={{color: 'red'}}>{error}</p>}
-            
-            <TaskList tasks={tasks} 
-                onToggle={id => dispatch({type: 'TOGGLE_TASK', payload: id})}
-                onRemove={id => dispatch({type: 'REMOVE_TASK', payload: id})} />
         </div>
     )
 }
 
+function App() {
+	return (
+		<>
+			<h1>Обработка ошибок в компонентах</h1>
+            <ErrorBoundary>
+                <ProblemComponent />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ProblemComponent />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ProblemComponent />
+            </ErrorBoundary>
+		</>
+	)
+}
+
 export default App