Axios Delete请求后触发map is not a function错误排查

核心问题 #

报错根源在于通用请求钩子useAxiosFunction复用了同一个response状态：

• 页面加载时，GET请求获取用户列表，后端返回数组，users（即response）是数组类型，map能正常执行。
• 执行DELETE请求后，后端返回的响应通常不是数组（比如是{success: true, message: "删除成功"}这类对象），此时setResponse(res.data)会把users从数组覆盖成非数组类型，后续再调用users.map自然会报错“map is not a function”。
• 你添加的Array.isArray(users)判断能避免报错，但因为DELETE后users已经不是数组，所以列表不会渲染，必须重新调用getData获取最新数组才能显示。

解决方案 #

方案1：删除完成后自动刷新列表（最直接有效） #

修改handleDelete函数，在DELETE请求完成后立即调用getData重新获取用户列表，确保users始终是数组：

const handleDelete = async (id) => {
    await axiosFetch({
        axiosInstance: axios,
        method: 'delete',
        url: 'http://localhost:3500/users',
        requestConfig: {
            data: { id }
        }
    });
    // 删除成功后重新拉取最新用户列表
    getData();
}

方案2：优化组件渲染判断，强制确保数组类型 #

如果不想每次删除都重新请求，可以在渲染时把users转为数组，避免非数组状态干扰：

{!loading && !error && 
    <ul>
        { Array.isArray(users) ? users.map((user, i) => (
            <li key={user._id}>
                {user.username}
                <button onClick={() => handleDelete(user._id)}>删除</button>
            </li>
        )) : null }
    </ul>
}

不过这种方法只是避免报错，无法自动更新列表，还是需要手动刷新，所以优先选方案1。

方案3：重构通用钩子，避免状态复用（进阶） #

你的useAxiosFunction是通用钩子，但复用同一个response会导致不同请求的返回值互相覆盖。可以给钩子添加请求标识，或者拆分成多个专用钩子（比如useGetUsers、useDeleteUser），每个钩子维护自己的状态，从根源避免状态污染。

额外提示 #

• 检查你的DELETE接口返回值：如果后端能在删除后返回更新后的用户数组，那也可以直接用这个返回值更新users，但这种做法不如重新GET请求可靠，因为后端可能不会返回完整列表。
• 组件中{!loading && !error && !users?.length && users?.data && ...}这段逻辑是处理非数组响应的，删除后如果不需要展示这类内容，可以考虑移除，避免混淆。

内容的提问来源于stack exchange，提问作者Rafał Uss