React 组件 + Axios 导入答案

【问题标题】：React component + Axios importReact 组件 + Axios 导入
【发布时间】：2020-12-03 00:30:48
【问题描述】：

我有一个 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 的窗口调用。谢谢。

【问题讨论】：

请将package.json添加到您的问题中，以便我们知道正确添加了axios以及axios的版本。谢谢。
axios 添加正确。它工作正常。问题是我导入 axios 的文件。它是父文件，应该是组件文件。

标签： reactjs import axios components

【解决方案1】：

你应该像这样导入 axios：

import * as axios from 'axios'

附注：尽量让您的组件从网络请求中清除，如果您确实需要这些，请将它们放在单独的文件中（或 redux + thunk）

【讨论】：

问题是我在父文件中导入了axios。所以范围超出了组件。如果我将导入移动到组件文件，它可以工作并且不需要窗口。

【解决方案2】：

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

【讨论】：