0

React on Rails アプリ、特に React 部分に関してはまったく新しいものです。Rails サービスの SQL クエリから与えられたネストされたハッシュのデータにアクセスしようとしています。まず、これは可能ですか？

Rails コンソールで、id によって user1 が既に見つかっているとします。LedgersService.transactions(user1).first はすべてのデータを次の形式で返します。

{:transactable=>{:type=>"入金", :id=>"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) は機能しましたが、これはトランザクションが配列に設定されているためですか?

Rails コンソールから取得したのと同じエンドポイントを React コンポーネントで取得する正しい方法は何ですか?

4

1 に答える 1