Вызов веб-службы REST от ReactJS

Question

Я пытался вызвать веб-службу REST для извлечения данных из базы данных и вернуть объект 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

В соответствии с this вопрос JSONP или «JSON with padding» - это технология связи, используемая в программах JavaScript, работающих в веб-браузерах, для запроса данных с сервера в другом домене, что запрещено обычными веб-браузерами из-за того же происхождения политика. JSONP использует тот факт, что браузеры не применяют политику одинакового происхождения для тегов скриптов. Обратите внимание, что для работы JSONP сервер должен знать, как отвечать с результатами в формате JSONP. JSONP не работает с результатами в формате JSON. Попробуйте использовать JSONP в своем вызове Ajax. Он обойдет Same Origin Policy.like это:

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 2

@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 для реализации веб-службы и понять, что заголовки гипермедиа (HAL) включены в объект JSON. Есть ли способ игнорировать эти данные заголовка при рендеринге в приложении-реакции? В настоящее время объект JSON выдает ошибку в строке 2 при разборе.

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}/> 
); 

... 

Обратите внимание на изменение имени переменной в функции карты от «пользователей» в «пользователь».