React报错：对象不能作为React子元素（含404请求失败错误）求解

这个报错的核心原因是你直接把一个Error对象当作React子元素渲染了——React只能渲染原始类型（字符串、数字、布尔值等）、React元素或数组，无法直接渲染Error这类复杂对象。

常见解决场景： #

• 异步请求错误处理：如果是接口请求返回404后，你把Error实例存在state里并直接渲染，改成提取错误信息字符串：

  // 错误写法
  return <div>{error}</div>; // error是Error实例
  
  // 正确写法
  return <div>{error?.message || '请求失败，请稍后重试'}</div>;
  

• 展示详细错误信息：如果需要展示错误码等更多细节，提取Error对象的具体属性渲染：

  return (
    <div className="error-container">
      <p>错误状态码：{error?.response?.status}</p>
      <p>错误描述：{error?.message}</p>
    </div>
  );
  

• 通用排查点：检查所有JSX中直接渲染的变量，确保它们是React允许的可渲染类型，避免把对象、函数这类非可渲染值直接放在子元素位置。

内容的提问来源于stack exchange，提问作者wang.da.da