получить доступ к данным из службы рельсов в реагирующем входном интерфейсе «реагировать на рельсы» - PullRequest
Новая
       23

получить доступ к данным из службы рельсов в реагирующем входном интерфейсе «реагировать на рельсы»

0 голосов
/ 20 марта 2019

Совершенно новый для приложений React on Rails, особенно часть React. Я пытаюсь получить доступ к данным в виде вложенного хэша, полученного из запроса SQL в службе Rails. Во-первых, это вообще возможно?

В Rails Console предположим, что user1 уже был найден по id, LedgersService.transactions (user1) .first возвращает все данные в этом формате:

{: transactable => {: тип => "Депозит", : Идентификатор => "28cba04f-5b9d-4c9c-AFCA-b09a6e0e8739", : User_id => "72700244-e6b0-4baf-a381-c22bfe56b022", : transacted_at => "2019-03-12 19: 04: 48.715678",: amount_cents => 15, : notes => "none",: processor => nil,: details => nil}, : ledgers => [{: entry_type => "credit",: amount_cents => 15, : transacted_at => "2019-03-12 19: 04: 48.715678", : User_id => "72700244-e6b0-4baf-a381-c22bfe56b022", : Transactable_type => "Депозит", : Transactable_id => "28cba04f-5b9d-4c9c-AFCA-b09a6e0e8739"}]}

Я пытаюсь сделать что-то подобное в моем компоненте React, чтобы попытаться получить данные, однако я не совсем уверен, как установить часть LedgersService.transactions. Вот как у меня это сейчас: 

class LedgersIndex extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ledgers_service: { transactions: [] }, paginator: { count: 0, page: 0, limit: 0 }, user: { id: this.props.match.params.user_id } };

Мой вызов в конечной точке: 

componentDidMount() {
    var user_id = this.state.user.id;
    this.fetchData(user_id, 1);
  }

  fetchData = (user_id, page_number) => {
    apiService.ledgersIndex(user_id, page_number)
      .then(
        paginated => {
          this.setState({
            ledgers_service: { 
              transactions: paginated.ledgers_service.transactions
            },
            paginator: {
              limit: paginated.meta.limit,
              count: paginated.meta.count,
              page: paginated.meta.page -1
            }
          });
        },

Далее в моем рендере: 

render() {
    const { classes } = this.props;
    const { ledgers_service, paginator } = this.state;

Мой выбор в apiService: 

function locationsIndex(page_number) {
  const requestOptions = {
    method: 'GET',
    headers: Object.assign({},
      authorizationHeader(),
      {  'Content-Type': 'application/json' })
  };

  return fetch(`${process.env.API_SERVER}/api/v1/admin/locations?page=${page_number}`, requestOptions)
    .then(handleResponse)
    .then(paginated => {
      return paginated;
    });
}

Когда я console.log (ledgers_service.transactions (this.state.user.id)), я получаю сообщение об ошибке, что ledgers_service.transactions не является функцией. console.log (paginator.count) однако работал, это потому что транзакции устанавливаются в массив?

Как правильно получить ту же самую конечную точку в моем компоненте React, которую я получил от своей консоли rails?

1 Ответ

0 голосов
/ 21 марта 2019

Совершенно новый для приложений React on Rails, особенно часть React.Я пытаюсь получить доступ к данным во вложенном хэше, полученном из SQL-запроса в службе Rails.

Да, JS нравится JSON , поэтому вы должны иметь действие Railsкоторый отвечает JSON.Это правильный способ обмена данными между React и Rails: 

# in your React app
fetch('/path/to/resource.json')
.then((returnedResource) => {
      // do something with JSON
 })
.catch(error => console.error('Error:', error));

# in your controller
respond_to do |format|
     format.json { render json: LedgersService.transactions(user1).first }
end

Оттуда вы можете рассматривать ваш returnedResource как объект JSON.В вашем случае это будет pagination

...