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

Question

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

提前致谢，

`
项目服务.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 };   `

让所有项目工作正常。现在我添加了一个新函数 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>
   
       ) `

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

TypeError: services_ProjectServices__WEBPACK_IMPORTED_MODULE_6 _.ProjectNames.getAllprojectNames 不是函数

标签： reactjs

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>
  );
};