Reactjs 从另一个组件调用函数答案

【问题标题】：Reactjs call function from another componentReactjs 从另一个组件调用函数
【发布时间】：2020-05-23 12:55:55
【问题描述】：

我想将 api 函数保留在单独的页面中，但我无法从登录组件调用登录 api 调用函数

控制台错误 - TypeError: _services__WEBPACK_IMPORTED_MODULE_3__.UseApi.Login 不是函数

//services
export const UseApi = () => {
    const Login = (email, password) => {
        axios.post('/api/login', { email: email, password: password})
           .then((result) => {
           });
    }
}


// login component
import { UseApi } from "./services" ;
const Login = () => {
    const handleSubmit = (event) => {
        UseApi.Login(email, password) 
    }
}

【问题讨论】：

标签： reactjs api components

【解决方案1】：

useApi 是一个函数，其中定义了另一个函数 Login。

要么从useApi函数返回函数

export const UseApi = () => {
    return (email, password) => {
        axios.post('/api/login', { email: email, password: password})
           .then((result) => {
                // code
           });
    }
}

并将其称为UseApi()(email, password)

或者只是删除嵌套函数

export const UseApi = (email, password) => {
     axios.post('/api/login', { email: email, password: password})
     .then((result) => {
          // code
      });

}

并将其称为UseApi(email, password)

另一种方法是从包含login 函数的UseApi 函数返回一个对象

export const UseApi = () => {
    return {
        login: (email, password) => {
          axios.post('/api/login', { email: email, password: password})
            .then((result) => {
                // code
            });
        }
    }
}

并将其称为UseApi().login(email, password)

【讨论】：