执行DELETE请求时遇500错误：前后端代码排查求助

问题根源 #

控制台报错显示请求URL为http://localhost:4000/reviews/undefined，说明前端传递的ID为undefined，同时后端处理不存在的资源时未做判空处理，直接触发500内部错误。

前端代码问题 #

import React,{useState, useEffect} from 'react'
import axios from 'axios'

function Renderreview() {
const [renderReview, setRenderReview] = useState([])

useEffect(()=>{
    axios.get('/reviews')
    .then(res => {
    console.log(res)
    setRenderReview(res.data)
    })
    .catch(err => {
    console.log(err)
    })
},[])

// 问题1：调用状态数组的id属性，数组本身无该属性，返回undefined
function handleDelete (id){
    console.log(renderReview.id)
    axios.delete(`/reviews/${renderReview.id}`,)
}

return (
    <div className='card1'>
    <h2>reviews</h2>
    {/* 问题2：map变量名与状态名重复，易引发混淆；问题3：点击按钮未传递当前review的id */}
    {renderReview.map((renderReview) => {
        return(
        <div className='renderedreviews'>{renderReview.review} 
        
        <button onClick={handleDelete} key={renderReview.review}>Delete</button>
        </div>
        )
    })}
    </div>
)
}

export default Renderreview

后端代码问题 #

def destroy
# 问题：find_by未找到资源时返回nil，直接调用destroy会抛出错误，导致500
review =Review.find_by(id: params[:id])
if review.destroy
    head :no_content
else
    render json: {error: review.errors.messages}, status: 422
end
end

修复方案 #

前端修复代码 #

import React,{useState, useEffect} from 'react'
import axios from 'axios'

function Renderreview() {
const [reviews, setReviews] = useState([]) // 重命名状态变量，避免命名冲突

useEffect(()=>{
    axios.get('/reviews')
    .then(res => {
        console.log(res)
        setReviews(res.data)
    })
    .catch(err => {
        console.log(err)
    })
},[])

// 使用传入的id参数发起请求，删除后更新列表
function handleDelete (id){
    console.log(id)
    axios.delete(`/reviews/${id}`)
    .then(() => {
        setReviews(reviews.filter(review => review.id !== id))
    })
    .catch(err => {
        console.log(err)
    })
}

return (
    <div className='card1'>
    <h2>reviews</h2>
    {/* map变量名改为review，点击时传递当前review的id，key使用id更可靠 */}
    {reviews.map((review) => {
        return(
        <div className='renderedreviews' key={review.id}>
            {review.review} 
            <button onClick={() => handleDelete(review.id)}>Delete</button>
        </div>
        )
    })}
    </div>
)
}

export default Renderreview

后端修复代码 #

def destroy
review = Review.find_by(id: params[:id])
# 先判断资源是否存在，不存在返回404
if review
    if review.destroy
        head :no_content
    else
        render json: {error: review.errors.messages}, status: 422
    end
else
    render json: {error: "Review not found"}, status: 404
end
end

控制台报错信息 #

DELETE http://localhost:4000/reviews/undefined 500 (Internal Server Error)
Uncaught (in promise)
AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

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