Реакция const не определена, ошибка отсутствует - PullRequest
Новая
       0

Реакция const не определена, ошибка отсутствует

0 голосов
/ 21 февраля 2020

Я изучаю ReactJS, я пытаюсь создать Spring Boot и React Java Full Stack Application с Maven. Ниже приведены файлы, которые я создал:

Приложение. 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();

Когда я обедаю свое приложение, в учебнике я должен чтобы получить следующую ошибку:

[Ошибка] Источник http://localhost: 3000 не разрешен Access-Control-Allow-Origin. [Ошибка] XMLHttpRequest не может загрузить http://localhost: 8080 / инструкторы / in28minutes / курсы из-за проверок контроля доступа. [Ошибка] Не удалось загрузить ресурс: Источник http://localhost: 3000 не разрешен Access-Control-Allow-Origin. (курсы, строка 0) [Ошибка] Необработанный отказ от обещания: ошибка: ошибка сети (анонимная функция) (0.chunk. js: 1097) promReactionJob

Но когда я работаю над своим заявлением, я получаю эту ошибку: 

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

Search for the keywords to learn more about each error.

Ответы [ 3 ]

3 голосов
/ 21 февраля 2020

Необработанный отказ от обещания означает, что в какой-то момент был сделан запрос на вызов вашего URL, но он был отклонен, возможно, это связано с тем, что вам нужно активировать CORS в своем проекте. Вы можете прочитать больше о CORS и добавить его в свой проект здесь .

2 голосов
/ 21 февраля 2020

Вы объявили INSTRUCTOR в ListCoursesComponent.jsx, но пытаетесь использовать его в другом файле. Если вы хотите сделать это, вам нужно экспортировать его туда, где вы его определили, и импортировать его в файл, который вы используете.

0 голосов
/ 22 февраля 2020

Решение: Как упомянуто @emoore, я добавил CORS в приложение с поддержкой Springboot: 

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

Как упомянуто @trixn, я импортировал INSTRUCTOR Const в файл ListCoursesComponent: 

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