React集成Spotify API时constructor报Missing semicolon错误怎么解决？

错误根因 #

你照搬的2017年教程用的是React旧版的**类组件（Class Component）**语法，你当前写的是函数组件，两者语法不兼容：

• 只有类组件才支持constructor()、super()、this.state、自定义方法直接写在组件内部这类写法
• 函数组件中不能直接写constructor，JS解析器识别不了该关键字才会误报「Missing semicolon」错误

修复方案 #

方案1：修改为类组件（匹配旧教程写法，无需改动后续教程逻辑） #

import './App.css';
// 首先引入Component基类
import React, { Component } from 'react';
// 记得补全spotifyApi的导入语句，和原教程导入逻辑保持一致即可
import spotifyApi from '你的spotify-api实际导入路径';

// 改成继承Component的类组件
class App extends Component {
  constructor(){
    super();
    const params = this.getHashParams();
    const token = params.access_token;
    if (token) {
      spotifyApi.setAccessToken(token);
    }
    this.state = {
      loggedIn: token ? true : false,
      nowPlaying: { name: 'Not Checked', albumArt: '', image: '' }
    }
  }
  getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    while ( e = r.exec(q)) {
        hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
  }

  // 类组件必须用render方法包裹返回的JSX结构
  render() {
    return (
      <div className="App">
        <a href='http://localhost:8888'>
          <button>Login with Spotify</button>
        </a>
        <div> Now Playing: { this.state.nowPlaying.name } </div>
        <div>
          <img src={ this.state.nowPlaying.image } style={{ width: 100}}/>
        </div>
        </div>
    );
  }
}

export default App;

方案2：修改为现代函数组件写法（符合当前React开发规范） #

import './App.css';
import React, { useState, useEffect } from 'react';
// 补全spotifyApi的导入语句
import spotifyApi from '你的spotify-api实际导入路径';

function App() {
  // 用useState替代类组件的this.state
  const [state, setState] = useState({
    loggedIn: false,
    nowPlaying: { name: 'Not Checked', albumArt: '', image: '' }
  })

  const getHashParams = () => {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    while ( e = r.exec(q)) {
        hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
  }

  // 组件初始化时执行原constructor内的逻辑
  useEffect(() => {
    const params = getHashParams();
    const token = params.access_token;
    if (token) {
      spotifyApi.setAccessToken(token);
      setState(prev => ({
        ...prev,
        loggedIn: true
      }))
    }
  }, [])

  return (
    <div className="App">
      <a href='http://localhost:8888'>
        <button>Login with Spotify</button>
      </a>
      <div> Now Playing: { state.nowPlaying.name } </div>
      <div>
        <img src={ state.nowPlaying.image } style={{ width: 100}}/>
      </div>
      </div>
  );
}

export default App;

额外提示：你原代码state里定义的是albumArt字段，但JSX里读取的是image字段，后续对接接口赋值时注意对应属性名，避免图片不显示问题。

内容的提问来源于stack exchange，提问作者Nokio