React组件+Axios导入

Question

我有一个React应用程序，想将Axios库导入React组件。但是，如果我尝试在组件中使用Axios，它是未定义的。我指的是这种风格：

import axios from 'axios'

相反，我必须写：

window.axios = require('axios').default;

然后调用window.axios。这是它唯一的工作方式。有可能从axios调用中丢弃窗口吗？

React组件是类风格的：

class Login extends React.Component
{
constructor(props)
{
super(props)
this.state = {
email: '',
password: '',
errors: []
}
}
...
sendData(e)
{
e.preventDefault();
let formData = new FormData();
formData.set('email', this.state.email);
formData.set('password', this.state.password);
// This is nasty
window.axios({
...
}
})
.then(response => {
...
})
.catch(response => {
...
});
}
render() {
return (
...
);
}
}

因此，问题是如何从调用axios中摆脱窗口调用。非常感谢。

Answer 1

您应该像这样导入axios：

import * as axios from 'axios'

附带说明：尽量从网络请求中清除您的组件，如果您确实需要这些，请将它们放在一个单独的文件(或redux+thunk(中

Answer 2

问题是我在父文件中导入了axios。所以范围超出了组件。它应该导入到存储组件代码的文件中。若我将导入移动到组件文件，它就可以工作，并且不需要窗口。