从 react 前端 react-on-rails 中的 rails 服务访问数据

Question

React on Rails 应用程序非常新，尤其是 React 部分。我正在尝试访问从 Rails 服务中的 SQL 查询给出的嵌套哈希中的数据。首先，这可能吗？

在 Rails 控制台中，假设 user1 已经被 id 找到，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 组件中获取相同端点的正确方法是什么？

Answer 1

React on Rails 应用程序非常新，尤其是 React 部分。我是 试图访问从 SQL 查询给出的嵌套散列中的数据 在 Rails 服务中。

是的，JS 喜欢 JSON，所以你应该有一个使用 JSON 响应的 Rails 动作。这是在 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