首页 > 解决方案 > React const 未定义 no-undef 错误

问题描述

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

以下是我创建的文件:

应用程序.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.

标签: reactjsspring-bootaxios

解决方案


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


推荐阅读