我正在尝试使用 module.exports 创建一个“全局”函数,我可以在我的 React 项目中使用它来使用 Axios 进行 API 调用。
我尝试了以下...
import axios from 'axios';
module.exports = {
fetchApi: function (endPoint) {
var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);
return axios.get(encodeURI)
.then(function (response) {
return response.data
})
}
}
//call function in other components like this
componentDidMount () {
fetchApi.fetchApi(this.setState.endPoint)
.then(function (endPoint) {
console.log("API endpoint: " + endPoint)
})
}
这将返回错误...
'fetchApi' 未定义 no-undef
我知道通常您可以使用导出默认值导入和导出组件,但我认为如果使用 module.export,则不需要这样做。
另外,如果我尝试像这样导入...
import fetchApi from '../../../utils/api'
我收到以下错误...
尝试导入错误:“../../../utils/api”不包含默认导出(作为“fetchApi”导入)。
任何帮助表示赞赏。谢谢。
编辑:
从 'axios' 导入 axios;
解决方案(编辑)...
api.js
const api = {
fetchApi: function(endPoint){
var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);
console.log(encodedURI)
return axios.get(encodedURI)
.then(function (response) {
return response.data
})
}
}
export default api;
网站.js
import api from '../../../utils/api'
//single api call
componentWillMount = async () => {
api.fetchApi('sites')
.then(data => {
console.log(data);
this.setState({ rows: data.rows, columns: data.columns })
})
.then(async () => {
this.setState({ tableRows: this.assemblePosts(), isLoading: false })
});
}
这使我可以访问以下 api 端点...
http://localhost:3001/sites
谢谢你的帮助。
最佳答案
我建议不要混合使用 require 和 es6 导入语法。坚持使用 es6 语法。
与 es6 语法相同。
import axios from 'axios';
const helpers = {
fetchApi: function(){
}
}
export default helpers;
用法
import helpers from './helpers';
helpers.fetchApi()
关于reactjs - 在 React ES6 中使用 module.exports,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57292201/