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。因此范围不在组件之内。应该将其导入存储组件代码的文件中。如果我将导入移动到组件文件，则可以正常工作，并且不需要窗口。