经过数小时的网络搜索，我仍未找到问题的解决方案。所以我正在React&Java Spring Boot。到目前为止，我已经能够在localhost://8080.当我在上运行前端React时，问题出现了localhost://3000->React应用程序不断加载&我在控制台中看到"Uncaught(in promise(SyntaxError:JSON中位置0处的意外标记<">错误。
App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
state = {
isLoading: true,
groups: []
};
async componentDidMount() {
const response = await fetch('/api/groups');
const body = await response.json();
this.setState({ groups: body, isLoading: false });
} ->
在此处获取语法错误
render() {
const {groups, isLoading} = this.state;
if (isLoading) {
return <p>Loading...</p>;
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<div className="App-intro">
<h2>JUG List</h2>
{groups.map(group =>
<div key={group.id}>
{group.name}
</div>
)}
</div>
</header>
</div>
);
}
}
export default App;
package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"bootstrap": "4.1.3",
"react": "^16.14.0",
"react-cookie": "3.0.4",
"react-dom": "^16.14.0",
"react-router-dom": "4.3.1",
"react-scripts": "3.4.3",
"reactstrap": "6.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"proxy": "http://localhost:8080" //====>PROBLEMATIC CODE(should be outside
//the script block)
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
response.json:
{
"$id": "response.json#",
"$schema": "http://json-schema.org/draft-06/schema#",
"type": "object",
"required": [
"status",
"statusText",
"httpVersion",
"cookies",
"headers",
"content",
"redirectURL",
"headersSize",
"bodySize"
],
"properties": {
"status": {
"type": "integer"
},
"statusText": {
"type": "string"
},
"httpVersion": {
"type": "string"
},
"cookies": {
"type": "array",
"items": {
"$ref": "cookie.json#"
}
},
"headers": {
"type": "array",
"items": {
"$ref": "header.json#"
}
},
"content": {
"$ref": "content.json#"
},
"redirectURL": {
"type": "string"
},
"headersSize": {
"type": "integer"
},
"bodySize": {
"type": "integer"
},
"comment": {
"type": "string"
}
}
}
解决方案：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080"
GitHub Repo
/api/groups调用返回的响应是什么？根据错误消息，响应可能是HTML格式的。但它被解析为JSON(在response.json()调用中(。
尝试将您的代码临时更改为以下内容：
const body = await response.text();
console.log(body);
或者使用"网络"选项卡检查服务器的响应。
"proxy": "http://localhost:8080"
上面的行应该在下面的脚本块之外。因为"；"代理"；不是脚本的一部分，而是一个与react服务器通信的端口。请参阅详细信息，如SO:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080"