React自定义useFetch Hook错误处理异常：无法渲染错误信息

问题根源 #

1. 正常请求无报错的原因 #

当请求正常完成时，error状态保持为false，组件不会进入if (error)的渲染分支，ErrorHandler组件不会被加载，自然不会触发对象渲染的错误。

2. 错误触发的核心原因 #

在useFetch的catch回调中，你直接将捕获到的Error对象赋值给了errorMessage：

.catch(err => {
    setError(true);
    setErrorMessage(err); // 此处存储的是完整Error对象，而非字符串
})

React无法直接渲染Error对象作为子元素——React仅支持渲染字符串、数字、React元素、null/undefined等合法类型，对象类型会直接抛出“对象不是有效的React子元素”的错误。

修复方案 #

方案1：存储错误的字符串信息 #

修改useFetch的catch逻辑，将Error对象的message属性存入errorMessage：

.catch(err => {
    setError(true);
    setErrorMessage(err.message); // 仅存储错误描述字符串
})

方案2：在ErrorHandler组件中兼容处理Error对象 #

如果需要保留完整的Error对象（比如后续要获取错误码等额外信息），可以在ErrorHandler中做兼容处理：

const ErrorHandler = ({ props }) => {
    return (
        <div className="error-component">
            <div>
                <h4>
                    {typeof props === 'object' ? props.message : props}
                </h4>
            </div>
            <div>
                <img src={error} alt="错误提示图标" />
            </div>
        </div>
    );
};

额外优化点 #

• 修正import位置：WeatherNow组件中import ErrorHandler from '../error-component/ErrorHandler';必须放在文件最顶部，不能写在函数内部，这是ES6模块的语法规范。
• 避免卸载时的状态更新警告：useEffect清理函数中的setError(false)可能在组件卸载时触发状态更新，可添加isMounted标志规避：

useEffect(() => {
    let isMounted = true;
    const controller = new AbortController();
    const signal = controller.signal;

    fetch(url, { signal: signal })
        .then(res => res.json())
        .then(result => {
            if (isMounted) setData([result]);
        })
        .catch(err => {
            if (isMounted) {
                setError(true);
                setErrorMessage(err.message);
            }
        })
    return () => {
        isMounted = false;
        controller.abort();
    };
}, [url]);

内容的提问来源于stack exchange，提问作者DragoO