我的 React 应用程序中的 Axios 出现未知 SyntaxError答案

【问题标题】：Unknown SyntaxError with Axios in my React App我的 React 应用程序中的 Axios 出现未知 SyntaxError
【发布时间】：2020-09-08 11:14:06
【问题描述】：

我正在尝试使用 axios 调用我的数据库，但在我的 vsCode 终端中出现令人沮丧的错误。

这是错误：

SyntaxError: C:\Users\Kelly Owoju\Desktop\Kelly Bright\my-web-app\node_modules\axios\index.js: Unexpected character ' ' (1:0)

> 1 |                                         
    | ^
    at parser.next (<anonymous>

这是我的代码：

import React, { Component } from 'react';
// import Typography from '@material-ui/core/Typography';
import { withStyles, createStyles } from "@material-ui/core/styles";
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Avatar from '@material-ui/core/Avatar';
import Menu from '../component/Menu';
import Typer from '../component/Typed';
import Show from '../component/Show'
import axios from 'axios';
// import Boxes from '../component/Boxes'



const styles = theme => createStyles({
    avatar: {
        [theme.breakpoints.down('lg')]: {
            marginLeft: '150px'
        },
        [theme.breakpoints.down('md')]: {
            marginLeft: '100px'
        },
        [theme.breakpoints.down('sm')]: {
            marginLeft: '100px'
        },
        [theme.breakpoints.down('xs')]: {
            marginLeft: '20px'
        },
        width: '60px',
        height: '60px',
    },
    loading: {
        textAlign: 'center'
    }

})



class Home extends Component {
    constructor() {
        super()
        this.state = {
            slides: null
        }
    }


    componentDidMount(){
        axios.get('/slides').then(res => {
            console.log(res.data);
            this.setState({slides: res.data});
        }).catch(e => {
            console.error(e);
        });
    };

    render() {
        const {classes} = this.props;
        let showSection = this.state.slides ? (
            this.state.slides.map(slide => <Show slide={slide} key={slide.id} />)
        ): <p className={classes.loading} >Loading...</p>
        return(
            <>
            <AppBar position='fixed' >
                <Toolbar>
                    <Avatar 
                    className={classes.avatar}
                    variant='circle'
                    src='logo.jpg'
                    />
                    <Menu />
                </Toolbar>
            </AppBar>

            {showSection}
            <Typer />
            </>           
        )
    }
}

export default withStyles(styles)(Home);

请问有人可以帮我解决这个问题吗？我不知道问题可能是什么。我以前从来没有见过这个。谁知道呢，它甚至可能是一件微不足道的事情。但请帮帮我。谢谢

【问题讨论】：

标签： javascript node.js reactjs axios material-ui

【解决方案1】：

这似乎是 axios 本身的问题，尝试重新安装模块：

npm uninstall axios

npm install axios

【讨论】：

哇。这是我卸载 axios 后重新安装时遇到的错误：
?我认为 stackoverflow 没有发布其余的评论。
npm 错误！代码 EPERM npm 错误！系统调用重命名 npm ERR！路径 C:\Users\Kelly Owoju\Desktop\Kelly Bright\my-web-app\node_modules\axios npm ERR！ dest C:\Users\Kelly Owoju\Desktop\Kelly Bright\my-web-app\node_modules\.axios.DELETE npm 错误！ errno -4048 当我尝试重新安装 axios 时，我得到了这些错误行以及更多错误。但最搞笑的是，axios 还在我的 package.json 依赖中。这怎么可能？
npm 错误！该操作被您的操作系统拒绝。 npm 错误！该文件可能已被使用（由文本编辑器或防病毒软件），npm ERR！或者您没有访问它的权限。 npm 错误！ npm 错误！如果您认为这可能是权限问题，请仔细检查 npm ERR！文件及其包含目录的权限，或尝试运行 npm ERR!再次以 root/管理员身份执行该命令。剩余的错误行..
@greg921。经过几次尝试，它最终成功了。卸载 axios 并重新安装它，然后将导入位置更改为在 React 导入后立即进行。不知道为什么这有效，但它有效。谢谢。