我正在创建一个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”。
1条答案
按热度按时间ef1yzkbh1#
钩子应该返回一些东西,在你的例子中是所有的API函数。所以,在钩子的末尾加上return。
那么在你的组件中使用这个钩子