react-router-dom中useNavigate在handleDelete函数中失效问题求助

核心问题分析 #

1. Delete按钮为type='submit'，点击时触发表单默认提交行为，页面刷新并携带表单参数，导致navigate跳转逻辑被中断
2. 条目删除后，组件重新渲染时仍会请求已不存在的资源，返回空数据后item被设为undefined，触发Cannot read properties of undefined (reading 'location')错误

修复步骤 #

1. 阻止表单默认提交行为 #

修改ItemHook.jsx中的handleDelete函数，添加事件对象并阻止默认行为：

const handleDelete = async (e) => {
    e.preventDefault(); // 阻止表单提交的默认刷新行为
    try {
        const res = await axios.delete(`${BASE_URL}/item/delete/${id}`);
        navigate("/items");
        console.log(res.data)
        return res.data
    } catch (error) {
        console.log(error);
    }
}

2. 处理空数据，避免item变为undefined #

修改ItemHook.jsx中的getItem函数，确保请求失败或返回空数据时，item始终保持默认结构：

const getItem = async () => {
    try {
        const response = await axios.get(`${BASE_URL}/item/${id}`);
        // 若返回数据为空，使用默认结构初始化
        setItem(response.data[0] || {
            location: '',
            category: '',
            item_name: '',
            description: '',
            unit_measure: '',
            case_size: '',
            vendor_name: '',
            vendor_code: ''
        });
    } catch (error) {
        console.log(error);
        // 请求失败时重置为默认结构
        setItem({
            location: '',
            category: '',
            item_name: '',
            description: '',
            unit_measure: '',
            case_size: '',
            vendor_name: '',
            vendor_code: ''
        });
    }
}

3. 移除冗余代码 #

删除ItemDetails.jsx中未使用的handleDelete函数，避免代码混淆：

// 移除这段未使用的代码
const handleDelete = async (_id) => {
    await axios.delete(`${BASE_URL}/item/delete/${id}`).then(
        () => navigate('items'))
}

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