Javascript 如何从服务器获取（或返回）数据？

我尝试使用react通过url获取数据。服务器向url提供json中字符串形式的对象列表（

String jsonBooks=new Gson（）.toJson（books）；

）。我尝试在react应用程序中获取此信息并进行渲染。但这是错误的： TypeError:无法读取未定义的属性“map”

import React, { Component } from 'react';
import './App.css';

class App extends Component {

        state = {
            books: []
        }

        componentDidMount() {
            fetch(`http://localhost:8080/app/bookshop/books`,
                {'mode': 'no-cors'},
                {
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Methods': 'GET, POST, HEAD, OPTIONS, PUT, DELETE, PATCH',
                    'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
                    'Access-Control-Allow-Credentials': true
                }})
                .then(res => {
                    const books = res.data;
                    // console.log(res.data);
                    this.setState({books});
                });
        }

    // http://localhost:8080/app/bookshop/books
cd
      render() {
          return (

              <div>
                  <h1>Books:</h1>
                  <table>
                      <tr>
                          <th>Name</th>
                          <th>Author</th>
                          <th>Izdat</th>
                          <th>Genre</th>
                          <th>Price</th>
                          <th>Amount</th>
                      </tr>
                      {this.state.books.map(book =>
                          <tr><th>{book.name}</th>
                              <th>{book.author}</th>
                              <th>{book.izdat}</th>
                              <th>{book.genre}</th>
                              <th>{book.price}</th>
                              <th>{book.amount}</th>
                          </tr>
                      )}
                  </table>
              </div>
          );
      }
}
export default App;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
状态={
书籍：[]
}
componentDidMount（）{
取回(`http://localhost:8080/app/bookshop/books`,
{'mode'：'no cors'}，
{
标题：{
“访问控制允许来源”：“*”，
“访问控制允许方法”：“获取、发布、头部、选项、放置、删除、修补”，
“访问控制允许标头”：“X-Requested-With，内容类型”，
“访问控制允许凭据”：true
}})
。然后（res=>{
const books=res.data；
//console.log（res.data）；
这个.setState（{books}）；
});
}
// http://localhost:8080/app/bookshop/books
光盘
render（）{
返回(
书：
名称
作者
伊兹达特
体裁
价格
数量
{this.state.books.map（book=>
{book.name}
{book.author}
{book.izdat}
{book.genre}
{book.price}
{账面金额}
)}
);
}
}
导出默认应用程序；

这就是服务器上的函数（java、jax-rs）：

@GET
@产生（{MediaType.APPLICATION_JSON}）
@路径（“/books”）
公共弦书（）{
BooksDao BooksDao=新BooksDao（）；
ArrayList books=booksDao.getBooks（）；
字符串jsonBooks=new Gson（）.toJson（books）；
归还作业指导书；
}

---

我必须为修复做些什么？

您的渲染在

获取

承诺解决之前进行。您可以在

状态

中添加一个名为

isLoading

的字段，并在执行

获取

调用之前将其设置为

true

。当这是

true

时，显示一个加载图标，然后在获取返回您的数据后，将

isLoading

设置为

false

，并呈现书籍。

对于正面的获取，它应该是（没有cors标题）：

和服务器上配置的cors头，在本例中，我这样做了：

@GET
@Produces({MediaType.APPLICATION_JSON})
@Path("/books")
public Response Books() {
    BooksDao booksDao = new BooksDao();
    ArrayList<Book> books = booksDao.getBooks();
    String jsonBooks = new Gson().toJson(books);
    return Response
            .status(200)
            .header("Access-Control-Allow-Origin", "*")
            .header("Access-Control-Allow-Headers", "origin, content-type, accept, authorization")
            .header("Access-Control-Allow-Credentials", "true")
            .header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD")
            .header("Access-Control-Max-Age", "1209600")
            .entity(jsonBooks)
            .build();
}

@GET
@产生（{MediaType.APPLICATION_JSON}）
@路径（“/books”）
公众回应书（）{
BooksDao BooksDao=新BooksDao（）；
ArrayList books=booksDao.getBooks（）；
字符串jsonBooks=new Gson（）.toJson（books）；
返回响应
.现状（200）
.header（“访问控制允许原点”、“*”）
.header（“访问控制允许标头”、“来源、内容类型、接受、授权”）
.header（“访问控制允许凭据”、“true”）
.header（“访问控制允许方法”、“获取、发布、放置、删除、选项、HEAD”）
.header（“访问控制最大年龄”，“1209600”）
.实体（jsonBooks）
.build（）；
}

注释掉的行日志是什么？没有，我试图修复它。忘了删除。已编辑。我是说

console.log（res.data）

它真的是一个数组吗？或者更确切地说是一个字符串？在react端，服务器返回

stringjsonbooks=newgson（）.toJson（books），arraylist的json格式。不要使用模式：“无cors”。请参阅第页的答案。并且不要试图为来自前端代码的请求设置任何访问控制Allow-*头。这些标题都是响应标题。您需要为
http://localhost:8080/app/bookshop/books
endpoint。前端代码也没有以正确的方式返回响应主体。fetch API的响应没有“data”属性。状态在类的开头初始化为：state={books:[]}即使承诺未完全完成，映射也不应在空数组上引发错误
 componentDidMount() {
        fetch(`http://localhost:8080/app/bookshop/books`)
            .then(res => res.json())
            .then(books => this.setState({ books }))
            .catch(console.error)
    } 

@GET
@Produces({MediaType.APPLICATION_JSON})
@Path("/books")
public Response Books() {
    BooksDao booksDao = new BooksDao();
    ArrayList<Book> books = booksDao.getBooks();
    String jsonBooks = new Gson().toJson(books);
    return Response
            .status(200)
            .header("Access-Control-Allow-Origin", "*")
            .header("Access-Control-Allow-Headers", "origin, content-type, accept, authorization")
            .header("Access-Control-Allow-Credentials", "true")
            .header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD")
            .header("Access-Control-Max-Age", "1209600")
            .entity(jsonBooks)
            .build();
}