如何解决React组件+ Axios导入
我有一个React应用,并且想将Axios库导入React组件。但是,如果我尝试在组件内部使用Axios,则它是未定义的。我的意思是这种风格:
import axios from 'axios'
我必须写:
window.axios = require('axios').default;
,然后调用window.axios。这是它唯一起作用的方式。是否可以从axios调用中删除窗口?
反应组件是类样式:
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取消窗口调用。谢谢。
解决方法
您应该这样导入axios:
import * as axios from 'axios'
侧面说明:尝试保持组件不受网络请求的影响,如果确实需要这些组件,请将它们放在Separe文件中(或redux + thunk)
,问题是我在父文件中导入了axios。因此范围不在组件之内。应该将其导入存储组件代码的文件中。如果我将导入移动到组件文件,则可以正常工作,并且不需要窗口。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。