TypeError：Webpack 导入的模块不是函数

Question

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

类型错误：_services_shifts__WEBPACK_IMPORTED_MODULE_2__.default.postData 不是函数

轮班服务模块：

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

模块提供特殊的\xc2\xa0export default\xc2\xa0 （\xe2\x80\x9c默认导出\xe2\x80\x9d）语法，以使每个模块\xe2\x80\x9d方式的\xe2\x80\x9cone看起来更好。每个文件可能只有一个\xc2\xa0export default\xc2\xa0。并且在下面的示例中我们可以忽略类的名称。

\n\n

 //Module1\nexport default class{\n}\n

\n\n

然后导入它，不带花括号和任何名称：

\n\n

//Module2\nimport anyname from './Module1' \n

\n\n

您的场景有所不同，有两个函数。您可以导出默认的一个函数

\n\n

export default getAll\n

\n\n

并正常导出其他功能。

\n\n

export postData\n

\n\n

以及导入时

\n\n

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

\n\n

或者

\n\n

在Shiftservice模块中删除default此处并正常导出：

\n\n

import axios from 'axios'\nconst baseUrl = '...'\n\nconst getAll = () => {\n    const request = axios.get(baseUrl)\n    return request.then(response => response.data)\n}\nconst postData = newObject => {\n    const request = axios.post(baseUrl, newObject)\n    return request.then(response => response.data)\n}\n\nexport {getAll, postData}\n

\n\n

导入您的模块

\n\n

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

\n\n

或者

\n\n

import * as shiftService from './Module1'\n

\n\n

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

\n

Answer 2

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

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