React const 未定义 no-undef 错误答案

【问题标题】：React const is not defined no-undef errorReact const 未定义 no-undef 错误
【发布时间】：2020-06-05 22:32:27
【问题描述】：

我正在按照教程学习 ReactJS，我正在尝试使用 Maven 创建 Spring Boot 和 React Java 全栈应用程序。

以下是我创建的文件：

App.js

import React, { Component } from "react";
import "./App.css";
import InstructorApp from "./component/InstructorApp";

class App extends Component {
  render() {
    return (
      <div className="container">
        <InstructorApp />
      </div>
    );
  }
}

export default App;

ListCoursesComponent.jsx：

import React, { Component } from "react";
import CourseDataService from "../service/CourseDataService";

class ListCoursesComponent extends Component {
  constructor(props) {
    super(props);
    this.refreshCourses = this.refreshCourses.bind(this);
  }

  componentDidMount() {
    this.refreshCourses();
  }

  refreshCourses() {
    CourseDataService.retrieveAllCourses(INSTRUCTOR) //HARDCODED
      .then(response => {
        console.log(response);
      });
  }
}
export default ListCoursesComponent;

InstructorApp.jsx：

import React, { Component } from "react";
import ListCoursesComponent from "../component/ListCoursesComponent";

class InstructorApp extends Component {
  render() {
    return (
      <>
        <h1>Instructor Application</h1>
        <ListCoursesComponent />
      </>
    );
  }
}

export default InstructorApp;

CourseDataService.js：

import axios from "axios";

const INSTRUCTOR = "in28minutes";
const COURSE_API_URL = "http://localhost:8080";
const INSTRUCTOR_API_URL = `${COURSE_API_URL}/instructors/${INSTRUCTOR}`;

class CourseDataService {
  retrieveAllCourses(name) {
    return axios.get(`${INSTRUCTOR_API_URL}/courses`);
  }
}
export default new CourseDataService();

当我在使用我的应用程序时，在教程中我应该得到以下错误：

[错误] Access-Control-Allow-Origin 不允许 Origin http://localhost:3000。
[错误] 由于访问控制检查，XMLHttpRequest 无法加载 http://localhost:8080/instructors/in28minutes/courses。
[错误] 加载资源失败：Access-Control-Allow-Origin 不允许 Origin http://localhost:3000。（课程，第 0 行）
[错误] 未处理的承诺拒绝：错误：网络错误（匿名函数）（0.chunk.js:1097） promiseReactionJob

但是当我在我的应用程序中吃午餐时，我收到了这个错误：

./src/component/ListCoursesComponent.jsx
  Line 15:42:  'INSTRUCTOR' is not defined  no-undef

Search for the keywords to learn more about each error.

【问题讨论】：

标签： reactjs spring-boot axios

【解决方案1】：

未处理的承诺拒绝意味着在某些时候请求调用您的 url，但被拒绝，这可能是因为您需要在项目中激活 CORS。您可以阅读有关 CORS 的更多信息并将其添加到您的项目 here。

【讨论】：

【解决方案2】：

您在ListCoursesComponent.jsx 中声明了INSTRUCTOR，但您正试图在不同的文件中使用它。如果你想这样做，你需要在你定义它的地方导出它，然后在你使用它的文件中导入它。

【讨论】：

【解决方案3】：

解决方案：
正如@emoore 所提到的，我已通过以下方式在我的springboot 支持的应用程序中添加了CORS：

@CrossOrigin(origins = { "http://localhost:3000", "http://localhost:4200" })
@RestController

正如@trixn 所述，我通过以下方式在 ListCoursesComponent 文件中导入了 INSTRUCTOR Const：

import INSTRUCTOR from "../service/CourseDataService";

【讨论】：