axios 如何从React钩子导出多个函数?

qlfbtfca  于 2023-03-02  发布在  iOS
关注(0)|答案(1)|浏览(127)

我正在创建一个react钩子,包含5个函数用于CRUD axios调用。我不知道如何导出和导入它们。
这是我的自定义钩子代码

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 {
            const response = await axiosPrivate.delete('/employees', 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);
        }
    }

}

export default useEmployeeAPI;

我就是这样进口的

import { useState, useEffect ,useContext } from 'react';

import { Table, TableHead, TableCell, TableRow, TableBody, Button, styled } from '@mui/material'
import {useEmployeeAPI} from '../hooks/useEmployeeAPI';
import { Link } from 'react-router-dom';
import EmployeeContext from "../context/EmployeeProvider";

const StyledTable = styled(Table)`
    width: 90%;
    margin: 50px 0 0 50px;
`;

const THead = styled(TableRow)`
    & > th {
        font-size: 20px;
        background: #000000;
        color: #FFFFFF;
    }
`;

const TRow = styled(TableRow)`
    & > td{
        font-size: 18px
    }
`;

const AllEmployees = () => {
    const { employees, setEmployees } = useContext(EmployeeContext);
    
    useEffect(() => {
        getAllEmployees();
    }, []);

    const deleteUserData = async (id) => {
        await deleteUser(id);
        getAllEmployees();
    }

    const getAllEmployees = async () => {
        let response = await useEmployeeAPI.getEmployees();
        setEmployees(response.data);
    }

    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>
                            <Button color="secondary" variant="contained" onClick={() => deleteUserData(user.id)}>Delete</Button> 
                        </TableCell>
                    </TRow>
                ))}
            </TableBody>
        </StyledTable>
    )
}

export default AllEmployees;

我收到以下错误-尝试导入错误:未从..“/hooks/useEmployeeAPI”导出“useEmployeeAPI”。

ef1yzkbh

ef1yzkbh1#

钩子应该返回一些东西,在你的例子中是所有的API函数。所以,在钩子的末尾加上return。

return [getEmployees, getEmployee, addEmployee, ...]

那么在你的组件中使用这个钩子

const [getEmployees, ...] = useEmployeeAPI()

// then you can call API functions
const handleGet = () => {
  getEmployees()
}

相关问题