类型错误：Webpack 导入的模块不是 function

Question

我有一个计算工作班次的后端。 我正在尝试使用服务/班次中的模块发布一些必需的用户输入。 getAll 方法工作正常，但发布会引发错误

类型错误：_services_shifts__WEBPACK_IMPORTED_MODULE_2__.default.postData 不是 function

换档服务模块：

import axios from 'axios'
const baseUrl = '...'

const getAll = () => {
    const request = axios.get(baseUrl)
    return request.then(response => response.data)
}
const postData = newObject => {
    const request = axios.post(baseUrl, newObject)
    return request.then(response => response.data)
}

export default {getAll, postData}

我有一个按钮，可以在单击时触发以下调用代码：

import shiftService from './services/shifts'

  const postData = (event) => {
    event.preventDefault()
    const sampleObject = {
      sampleField: sample
    }
    shiftService
      .postData(sampleObject)
      .then(returnedData => {
        console.log(returnedData)
      })
}

当执行到 shiftService.postData 时，抛出错误。

我真的很困惑，因为我基本上是在复制我的一些有效的旧项目，但在这里我只是找不到问题。 预先感谢您帮助新人！

Answer 1

模块提供特殊的默认导出（“默认导出”）语法，使“每个模块一个东西”的方式看起来更好。 每个文件可能只有一个导出默认值。在下面的示例中我们可能会忽略 class 的名称。

 //Module1
export default class{
}

然后导入它而不用任何名称的大括号：

//Module2
import anyname from './Module1' 

您的情况不同，有两个功能。您可以导出默认一个 function

export default getAll

并正常导出另一个function。

export postData

并且在导入时

import{ default as getAll,postData} from './yourModule'

要么

在 Shiftservice 模块中去掉这里的default并正常导出：

import axios from 'axios'
const baseUrl = '...'

const getAll = () => {
    const request = axios.get(baseUrl)
    return request.then(response => response.data)
}
const postData = newObject => {
    const request = axios.post(baseUrl, newObject)
    return request.then(response => response.data)
}

export {getAll, postData}

在你的模块中导入

import {getAll,PostData} from './Module1'

要么

import * as shiftService from './Module1'

然后使用shiftServer.postData() .....

Answer 2

好的，我对解决方案感到尴尬。 我只是从错误的文件夹中编辑早期版本的 shiftService，而导入的服务中只有 get 方法...

所以如果放置正确，我的代码实际上可以工作。 感谢您的宝贵时间，也感谢您分享同样有效的替代方法。

Answer 3

我认为这是因为您将 function 声明为箭头函数并以这种方式导出：

export default {getAll, postData}

您需要将它们声明为普通函数

function postData(){
}

那应该工作