Rails7+React删除请求报错：SyntaxError: Unexpected end of JSON input

问题原因 #

• 前端解析空响应报错：Rails后端destroy方法返回head :no_content，会发送无响应体的204状态码，但前端调用r.json()尝试解析JSON，空内容触发JSON解析错误。
• 请求URL错误：fetch(reviews/${id}#destroy)中的#destroy是多余的，Rails RESTful路由中删除评论的正确URL为/reviews/${id}，无需锚点指向action。

修复步骤 #

1. 修正前端fetch请求 #

修改handleDeleteClick函数，移除多余的锚点并停止解析空响应：

function handleDeleteClick(id) {
  fetch(`/reviews/${id}`, { method: "DELETE" })
    .then((r) => {
      if (r.ok) {
        // 可在此添加前端状态更新逻辑，比如移除页面上对应的评论
      }
    })
    .catch(err => console.error('删除请求出错:', err));
};

2. （可选）后端返回确认信息 #

若需要前端获取删除成功的确认数据，可修改Rails的destroy方法返回JSON：

def destroy
  review = find_review
  review.destroy
  render json: { message: "评论已删除" }, status: :ok
end

此时前端可继续使用r.json()解析响应内容。

额外说明 #

Render的PostgreSQL数据库不影响此问题，错误完全由前后端响应格式不匹配导致，重新渲染后评论消失说明数据库删除操作已生效。

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