时间戳

首页 > 解决方案 > Reactjs 从另一个组件调用函数

reactjs - Reactjs 从另一个组件调用函数

问题描述

我想将 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) 
    }
}

标签： reactjsapicomponents

解决方案

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)

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

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

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

推荐阅读