如何在jsx文件中导入和导出类

Question

我在导出的两个类中有一个服务文件，我需要在一个文件中导出一个类，并将另一个类导出到另一个文件。它的编译很好，但在渲染时，它说我导出的第二个函数不是函数。是因为导出、导入没有正确进行还是我在五月的代码中犯了任何错误。

提前感谢

`
ProjectService.jsx

import apiClient from "../shared/axios.js";
import apimapping from "../shared/apimapping.js";
class ProjectService { 
getAllProjects = () => {
return apiClient.get(apimapping.GET_PROJECTS);
}   
}
class ProjectNames {
getAllprojectNames = () => {
return apiClient.get(apimapping.GET_PROJECT_NAMES);
}
}
export { ProjectService, ProjectNames };   `

Get all项目运行良好。现在我添加了一个新函数getAllProjectNames

`
注册.jsx

import React,{useState,useEffect} from 'react';
import Layout from '../common/Layout.jsx';
import TextField from '@material-ui/core/TextField';
import useForm from '../customHook/useForm';
import { useHistory } from 'react-router';
import { ProjectNames } from '../../services/ProjectServices';

const UserRegistration = () =>{

const [projects, setProjects] = useState([]);    
const successMessage="Registration completed Successfully";
const {inputs,handleReleaseChange, errors, styles, handleuserRegistrationChange} = 
useForm ({
employeeEmail:'',
employeeId:'',
projectsName:'',

})
useEffect(()=>{
ProjectNames.getAllprojectNames().then((response) =>{
const {data} = response.data;
setProjects(data);
});
},[])

return(
<Layout>
<div>
<h2>User Registration</h2>

<div className="card"  >
<div className="card-body" >
{/* <TextField  style={styles}
id="application_id" 
label="Application ID" 
variant="outlined"  
name="applicationId" 
value={inputs.applicationId}
onChange={handleReleaseChange}
autoComplete ="off"
/><br/>               */}
<TextField 
id="employee_email" 
label="Employee Email" 
variant="outlined"  
name="employeeEmail" 
value={inputs.employeeEmail}
onChange={handleReleaseChange}
style={styles}
autoComplete ="off"
/>


</div>
</div>



</Layout>

) `

下面是我得到的错误。是不是因为函数没有导入？如果是，我必须如何继续。

类型错误：services_ProjectServices_WEBPACK_IMPORTED_MODULE_6_.ProjectNames.getAllprojectNames不是函数

Answer 1

import apiClient from "../shared/axios.js";
import apimapping from "../shared/apimapping.js";
class ProjectService {
getAllProjects = () => {
return apiClient.get(apimapping.GET_PROJECTS);
};
}
class ProjectNames {
getAllprojectNames = () => {
return apiClient.get(apimapping.GET_PROJECT_NAMES);
};
}
export default { ProjectService, ProjectNames };

导出默认值，然后在其他文件中导入，如

import React, { useState, useEffect } from "react";
import Layout from "../common/Layout.jsx";
import TextField from "@material-ui/core/TextField";
import useForm from "../customHook/useForm";
import { useHistory } from "react-router";
import Project from "../../services/ProjectServices";
const UserRegistration = () => {
const [projects, setProjects] = useState([]);
const successMessage = "Registration completed Successfully";
const {
inputs,
handleReleaseChange,
errors,
styles,
handleuserRegistrationChange,
} = useForm({
employeeEmail: "",
employeeId: "",
projectsName: "",
});
useEffect(() => {
Project.ProjectNames.getAllprojectNames().then((response) => {
const { data } = response.data;
setProjects(data);
});
}, []);
return (
<Layout>
<div>
<h2>User Registration</h2>
<div className="card">
<div className="card-body">
{/* <TextField  style={styles}
id="application_id" 
label="Application ID" 
variant="outlined"  
name="applicationId" 
value={inputs.applicationId}
onChange={handleReleaseChange}
autoComplete ="off"
/><br/>               */}
<TextField
id="employee_email"
label="Employee Email"
variant="outlined"
name="employeeEmail"
value={inputs.employeeEmail}
onChange={handleReleaseChange}
style={styles}
autoComplete="off"
/>
</div>
</div>
</div>
</Layout>
);
};