React.js中使用axios向REST API上传图片及文件选择灰屏问题排查

灰屏本质是代码运行时抛出未捕获错误导致组件渲染崩溃，按以下步骤排查修复即可：

1. 优先查看控制台报错 #

• 打开浏览器开发者工具的Console面板，优先解决面板中显示的红色报错信息，可快速定位崩溃点

2. 修复现有代码中的已知问题 #

你的代码存在多处可直接触发崩溃的错误：

2.1 修复语法错误 #

api.post方法参数缺少分隔逗号，会直接触发JS解析报错：

// 错误写法
await api.post('/'{name:this.state.name,description:this.state.description,image_url:this.state.image_url})
// 修正写法，在路径后添加逗号
await api.post('/', {name:this.state.name,description:this.state.description,image_url:this.state.image_url})

2.2 修正文件上传格式 #

直接传递File对象会被axios默认序列化为JSON，后端无法正常接收，需转成FormData格式提交：

addCategory =async () => {
    const formData = new FormData()
    formData.append('name', this.state.name)
    formData.append('description', this.state.description)
    // 第三个参数为文件名，适配多数后端接口的校验规则
    formData.append('image_url', this.state.image_url, this.state.image_url?.name || 'upload')
    await api.post('/', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

2.3 补全state初始化字段 #

提交逻辑用到的name、description字段未在state中初始化，读取undefined值可能触发逻辑报错：

// 修正后的state初始化
this.state = {
    category : [],
    id:'',
    image_url:null,
    name: '',
    description: ''
}

2.4 修正React DOM属性写法 #

不符合React规范的属性写法会触发渲染异常：

• 原生class属性需改为className，即<div className="modal-footer">
• 原生tabindex属性需改为驼峰写法tabIndex

3. 兜底排查方案 #

修复上述问题后仍有灰屏，可给组件包裹React错误边界，捕获组件内部错误避免整页崩溃，同时打印错误详情定位问题。

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