Question

我试图调用REST Web服务从数据库中获取数据并将JSON对象返回到ReactJS应用程序。当我从浏览器访问URL时，它显示JSON对象但是当我尝试呈现数据时表中没有显示任何内容。

我的示例代码看起来像

import React from 'react';
import $ from 'jquery'; 

export default class Members extends React.Component {
  constructor(props) {
    super(props);
    this.state = { users: [] };
  }

  componentDidMount() {
    $.ajax({
      url: "http://localhost:8080/users"
    }).then(function(data) {
        this.setState({
                    users:data
        });
    });
    }
  render() {
    return (
     <UsersList users={this.state.users}/>
    )
  }
}

class UsersList extends React.Component {
    render() {
        var users = this.props.users.map(users =>
            <User key={user._links.self.href} user={user}/>
        );
        return (
            <table>
                <tbody>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                    {users}
                </tbody>
            </table>
        )
    }
}
class User extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.user.firstName}</td>
                <td>{this.props.user.lastName}</td>
            </tr>
        )
    }
}

这是异步加载的问题吗？

Answer 1

@Alireza：谢谢你的帮助。我能够从当前看起来像

的服务中获取JSON对象

{
  "_embedded" : {
    "users" : [ {
      "firstName" : "Harshal",
      "lastName" : "Patil",
      "location" : "ABC",
      "userId" : "USR_1",
      "_links" : {
        "self" : {
          "href" : "#urlLink"
        },
        "user" : {
          "href" : "#urlLink"
        }
      }
    } ]
  },
  "_links" : {
    "self" : {
      "href" : "#urlLink"
    },
    "profile" : {
      "href" : "#urlLink"
    }
  }
}

我已经使用Spring Data Rest进行Web服务实现，并了解超媒体标头（HAL）包含在json对象中。在react应用程序中呈现时是否有任何方法可以忽略这些标头数据？目前，JSON对象在解析时会在第2行引发错误。

Answer 2

根据this问题JSONP或＆＃34; JSON with padding＆＃34;是一种在Web浏览器中运行的JavaScript程序中使用的通信技术，用于从不同域中的服务器请求数据，这是典型Web浏览器因同源策略而禁止的。 JSONP利用了浏览器不对脚本标记强制实施同源策略的事实。请注意，要使JSONP正常工作，服务器必须知道如何使用JSONP格式的结果进行回复。 JSONP不适用于JSON格式的结果。尝试在Ajax调用中使用JSONP。它将绕过同源政策。就像这样：

  componentDidMount() {
    $.ajax({
      url: "http://localhost:8080/users",
      async:true,
      dataType : 'jsonp'   //you may use jsonp for cross origin request
      crossDomain:true,
    }).then(function(data) {
        this.setState({
                    users:data
        });
    });
    }

stackoverflow上的答案很好：jQuery AJAX cross domain

Answer 3

可能这可能会迟到，但我发现用户地图方法中项目的变量引用存在问题。

这是您的代码

class UsersList extends React.Component {
  render() {
    var users = this.props.users.map(users =>
   <User key={user._links.self.href} user={user}/>
);

...

它可能应该是

class UsersList extends React.Component {
  render() {
    var users = this.props.users.map(user =>
   <User key={user._links.self.href} user={user}/>
);

...

注意map函数中变量名称从“users”到“user”的变化。

从ReactJS调用REST Web服务

3 个答案: