reactjs - 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.
解决方案
未处理的承诺拒绝意味着在某些时候请求调用您的 url,但被拒绝,这可能是因为您需要在项目中激活 CORS。您可以在此处阅读有关 CORS 的更多信息并将其添加到您的项目中。
推荐阅读
- delphi - 加载 .dylib Delphi 10.3.3 时出现问题
- c++ - VScode 调试 c++
- python - ModuleNotFoundError:没有名为“ui”的模块
- reactjs - http-proxy-middleware 代理在 React js 和 Spring Boot 项目中不起作用。GET API 返回 415 状态错误
- laravel - Laravel 8,尾风 CSS 初始化
- react-native - 反应原生部分模态
- javascript - 移除一个复选框及其对应的列表标签
- python-3.x - TKinter 滚动条 - 滚动条过多的问题
- c# - 当属性类型包含泛型类型时,如何将泛型 JsonConverter 应用于泛型类的属性?
- javascript - 有没有办法在重新加载页面时将缩放级别重置为 100%?