使用DELETE方法Fetch时遇Unexpected end of JSON input错误求助

1. 「Unexpected end of JSON input」错误原因及修复 #

这个错误是因为你调用response.json()时，后端返回的响应不是有效的JSON格式——比如DELETE请求成功后，后端常返回204状态码（无响应体），或者返回纯文本而非JSON，强行解析就会报错。

修改代码，先判断响应状态再处理：

const deleteScreen = (id: any) => {
    console.log(id)
    fetch(`http://localhost:5002/admin/example?exampleId=${id}`, {
        method: 'DELETE',
        headers: {
            'Content-type': 'application/json',
            'Authorization': `Bearer ${token.token}`
        },
    })
    .then((response) => {
        if (!response.ok) throw new Error('请求失败');
        // 204状态码代表无响应体，无需解析JSON
        if (response.status === 204) return { result: null };
        return response.json();
    })
    .then((data) => {
        // 根据后端返回情况更新状态
        if (data?.result) {
            setAllScreens(data.result);
        } else {
            // 后端没返回完整列表时，前端直接从现有数据中删除对应项
            setAllScreens(prevList => prevList.filter(item => item.id !== id));
        }
    })
    .catch((err) => {
        console.log(err.message)
    })
}

2. 页面不自动重渲染的修复 #

之前因为JSON解析报错，代码直接进入catch块，没执行setAllScreens更新状态，所以页面不会重渲染。上面的代码既修复了解析错误，又补充了前端手动更新状态的逻辑——不管后端返回什么，都能保证state更新，触发页面重渲染。

额外提示 #

• 可以确认下后端DELETE接口的返回规则：如果是返回204，前端就跳过JSON解析；如果返回更新后的列表，直接用数据更新状态即可
• 确保列表项的id和传入的id匹配（你已经确认过类型，这条可以忽略）

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