ReactJS的Hook错误处理无法捕获错误

在本文中，我们将看到ReactJS开发人员面临的常见问题之一是Hook错误处理问题。当在Hook内部抛出错误时，但没有正确捕获和处理该错误，就会发生这个问题。结果是，错误未被解决，可能导致应用程序出现意外行为。

问题： 这是一个演示问题的代码示例：

import React, { useState } from 'react'; 
  
function Example() { 
    const [count, setCount] = useState(0); 
  
    const handleClick = () => { 
        setCount(count + 1); 
    }; 
  
    return ( 
        <div> 
            <p>Count: {count}</p> 
            <button onClick={handleClick}> 
                Increment 
            </button> 
        </div> 
    ); 
} 
  
export default Example;

输出：

const handleClick = () => { 
    throw new Error('Oops! Something went wrong.'); 
    setCount(count + 1); 
};

在这种情况下，错误消息 ” Oops！出了点问题。”将被抛出，但没有被正确捕获和处理。这将导致应用程序出现问题，并在控制台中显示错误消息。

输出:

ReactJS的Hook错误处理无法捕获错误

解决方法： 解决该问题的方法是将代码包裹在 handleClick 函数中的 try–catch 块中，就像这样：

import React, { useState } from 'react'; 
  
function Example() { 
    const [count, setCount] = useState(0); 
  
    const handleClick = () => { 
        try { 
            setCount(count + 1); 
            throw new Error('Oops! Something went wrong.'); 
        } catch (error) { 
            console.error(error); 
        } 
    }; 
  
  
    return ( 
        <div> 
            <p>Count: {count}</p> 
            <button onClick={handleClick}> 
                Increment 
            </button> 
        </div> 
    ); 
} 
  
export default Example;

在上面的代码中， try–catch 块捕获抛出的错误并将其记录到控制台。通过这种方式，错误得到了正确处理，应用程序可以继续运行而不会中断。

输出：

ReactJS的Hook错误处理无法捕获错误