在网上搜索了几个小时后，我还没有找到解决问题的办法。因此，我正在React上构建一个全堆栈CRUD应用程序
应用程序。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"
]
}
回答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回购
/api/groups调用返回的响应是什么？根据错误消息，响应可能是HTML格式的。但是它被解析为JSON（在response.JSON（）调用中）。
尝试暂时将代码更改为以下内容：
const body = await response.text();
console.log(body);
或者使用网络选项卡检查服务器的响应。
"proxy": "http://localhost:8080"
上面的行应该在下面的脚本块之外。因为“代理”不是脚本的一部分，而是一个与react服务器通信的端口，请参见以下详细信息：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080"
