React应用加载API返回图片短暂显示后报location未定义错误如何解决

问题原因排查及解决方案 #

1. 状态初始值错误

你当前图片状态的初始值是对象类型：

const [image, setImage] = useState({});

img标签的src属性仅支持字符串格式，页面首次渲染时还未拿到接口返回的图片地址，会直接把[object Object]作为src值传入，触发资源加载异常。
修复方式：将初始值改为空字符串，同时可增加条件渲染避免加载无效资源：

// 修改初始值
const [image, setImage] = useState('');

// 渲染处增加判断
{image && <img style={{ width: "700px", marginTop: "20px" }} src={image} alt="error" />}

2. axios实例创建位置错误

你把axios实例的创建逻辑写在了组件内部，每次组件重渲染都会重复生成新的实例，属于不必要的性能消耗，也可能引发异步请求异常。
修复方式：将axios导入和实例创建逻辑移到组件外部，统一用ES模块导入语法：

import axios from 'axios';
// 移到组件外部
const api = axios.create({
  baseURL: 'http://localhost:5000/',
  timeout: 10000
})

function Recipe(props) {
  // 组件内部逻辑
}

3. 服务端渲染环境兼容问题

如果你用的是Next.js、Remix这类支持SSR/SSG的框架，react-grid-system的Row、Col组件默认依赖window.location做响应式断点判断，服务端渲染阶段没有window对象，就会直接抛出location is undefined错误。
修复方式二选一：

• 给组件加客户端渲染标记，仅在组件挂载到浏览器后再渲染Row、Col内容
• 按照react-grid-system服务端渲染配置要求，在外层加ScreenClassProvider传入自定义断点，避免组件内部调用location属性

4. 资源路径校验

你当前接口请求地址是http://localhost:5000，图片资源地址是https://localhost:5001，需要确认：

• 接口返回的res.data.image为非空有效值，拼接后的路径可正常访问
• 本地5001端口的https服务有合法证书，不会触发浏览器安全拦截导致页面刷新

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