React Hook多函数导出方法及导入报错解决

问题分析与修复步骤 #

1. 修正自定义Hook的返回值与导出逻辑

你的useEmployeeAPI当前没有返回内部定义的CRUD函数，同时虽然是默认导出，但组件无法获取到未返回的方法。修改如下：

import useAxiosPrivate from "./useAxiosPrivate";

const useEmployeeAPI = () => {
    const axiosPrivate = useAxiosPrivate();

    const getEmployees = async () => {
        try {
            const response = await axiosPrivate.get('/employees');
            console.log(response.data);
            return response.data;
        } catch (err) {
            console.error(err);
        }
    }

    const getEmployee = async (id) => {
        try {
            const response = await axiosPrivate.get(`/employees/${id}`);
            console.log(response.data);
            return response.data;
        } catch (err) {
            console.error(err);
        }
    }

    const addEmployee = async (employee) => {
        try {
            const response = await axiosPrivate.post('/employees', employee);
            console.log(response.data);
            return response.data;
        } catch (err) {
            console.error(err);
        }
    }

    const deleteEmployee = async (id) => {
        try {
            // Axios delete传参需放在data字段（根据后端接收方式调整）
            const response = await axiosPrivate.delete('/employees', { data: { id } });
            console.log(response.data);
            return response.data;
        } catch (err) {
            console.error(err);
        }
    }

    const editEmployee = async (employee) => {
        try {
            const response = await axiosPrivate.put('/employees', employee);
            console.log(response.data);
            return response.data;
        } catch (err) {
            console.error(err);
        }
    }

    // 返回所有需要暴露给组件的函数
    return { getEmployees, getEmployee, addEmployee, deleteEmployee, editEmployee };
}

export default useEmployeeAPI;

2. 修正组件中的导入方式

useEmployeeAPI是默认导出，导入时不能使用花括号包裹，修改导入语句：

// 错误写法
// import {useEmployeeAPI} from '../hooks/useEmployeeAPI';

// 正确写法
import useEmployeeAPI from '../hooks/useEmployeeAPI';

3. 修正组件中Hook的使用方式

React Hook必须在组件内部调用，不能直接通过useEmployeeAPI.getEmployees的方式访问方法，需在组件内调用Hook并解构所需方法：

const AllEmployees = () => {
    const { employees, setEmployees } = useContext(EmployeeContext);
    // 调用自定义Hook，解构出需要的CRUD方法
    const { getEmployees, deleteEmployee } = useEmployeeAPI();
    
    useEffect(() => {
        getAllEmployees();
    }, []);

    const deleteUserData = async (id) => {
        await deleteEmployee(id); // 修正方法名：deleteEmployee而非deleteUser
        getAllEmployees();
    }

    const getAllEmployees = async () => {
        // getEmployees已返回response.data，无需再次取.data
        const employeeData = await getEmployees();
        setEmployees(employeeData);
    }

    return (
        <StyledTable>
            <TableHead>
                <THead>
                    <TableCell>Name</TableCell>
                    <TableCell>Email</TableCell>
                    <TableCell>Phone</TableCell>
                    <TableCell>City</TableCell>
                    <TableCell>Department</TableCell>
                    <TableCell></TableCell>
                </THead>
            </TableHead>
            <TableBody>
                {employees.map((employee) => (
                    <TRow key={employee.id}>
                        <TableCell>{employee.name}</TableCell>
                        <TableCell>{employee.email}</TableCell>
                        <TableCell>{employee.phone}</TableCell>
                        <TableCell>{employee.city}</TableCell>
                        <TableCell>{employee.department}</TableCell>
                        <TableCell>
                            <Button color="primary" variant="contained" style={{marginRight:10}} component={Link} to={`/edit/${employee.id}`}>Edit</Button>
                            {/* 修正参数：employee.id而非user.id */}
                            <Button color="secondary" variant="contained" onClick={() => deleteUserData(employee.id)}>Delete</Button> 
                        </TableCell>
                    </TRow>
                ))}
            </TableBody>
        </StyledTable>
    )
}

额外注意事项 #

• Axios的delete请求如果需要传递请求体参数，必须将参数放在{ data: {...} }对象中，否则后端可能无法接收参数。
• 确保useAxiosPrivate符合React Hook规则，是合法的自定义Hook。

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