json - React js 不通过来自 rest api 的 JSON 渲染
问题描述
我一直在尝试将我的 springboot 应用程序与其余服务后端连接到 ReactJS 前端。连接似乎有效,但我无法通过我的 React 应用程序呈现结果。
下面给出的是我的 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/blog');
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>Example</h2>
{groups.map(group =>
<div key={group.id}>
{this.state.title}
</div>
)}
</div>
</header>
</div>
);
}
}
export default App;
我的休息控制器在 me.salisuwy 包下面给出;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
@RequestMapping("/api")
@RestController
public class BlogController {
@Autowired
BlogRespository blogRespository;
@GetMapping("/blog")
public List<Blog> index(){
return blogRespository.findAll( );
}
@GetMapping("/blog/{id}")
public Blog show(@PathVariable String id){
int blogId = Integer.parseInt(id);
return blogRespository.findOne(blogId);
}
@PostMapping("/blog/search")
public List<Blog> search(@RequestBody Map<String, String> body){
String searchTerm = body.get("text");
return blogRespository.findByTitleContainingOrContentContaining(searchTerm, searchTerm);
}
@PostMapping("/blog")
public Blog create(@RequestBody Map<String, String> body){
String title = body.get("title");
String content = body.get("content");
return blogRespository.save(new Blog(title, content));
}
@PutMapping("/blog/{id}")
public Blog update(@PathVariable String id, @RequestBody Map<String, String> body){
int blogId = Integer.parseInt(id);
// getting blog
Blog blog = blogRespository.findOne(blogId);
blog.setTitle(body.get("title"));
blog.setContent(body.get("content"));
return blogRespository.save(blog);
}
@DeleteMapping("blog/{id}")
public boolean delete(@PathVariable String id){
int blogId = Integer.parseInt(id);
blogRespository.delete(blogId);
return true;
}
}
json输出如下
0:
id: 1
title: "Example1"
content: "Example Content1"
1:
id: 2
title: "Example1"
content: "Example Content1"
解决方案
您的render
方法中有语义错误,所以不要这样:
{groups.map(group =>
<div key={group.id}>
{this.state.title}
</div>
)}
尝试这个:
{groups.map(group =>
<div key={group.id}>
{group.title}
</div>
)}
推荐阅读
- ios - 当所有文本字段在 SwiftUI 中都有值时,如何动态更新屏幕上的标签?
- charts - 向折线图添加区域
- python - 如何打开经过强化学习 OpenAI Gym 游戏训练的 pkl 文件
- livecode - 在实时代码中将文本输入字段的边框线更改为紫色的按钮脚本中编写的代码?
- python - 为什么当 self.Input == 0 并且代码停止将“0”附加到 self.binaryList 时,elif 语句不适用?
- docusignapi - suppressEmails:true 不适用于复合模板信封创建
- angular - 离子 v3 + 电容器:错误类型错误:对象(...)
- python - Windows:使用 PostGres 时 Python 子进程“找不到指定的文件”
- android - 每次我通过 ADB 截屏时,Genymotion RAM 使用量都会增加 8MB
- python - Python - 如何让 tqdm 在 shell 中打印一行进度条?