嵌套路由React使用本地范围变量?

问题描述 投票:0回答:1

是的所以我不确定为什么这有效但不知何故呢?我很反应,只想了解我做错了什么或如何纠正。这是我的反应代码片段:

    this.state = { user_ledgers: [], paginator: { count: 0, page: 0, limit: 0 }, user: { id: this.props.match.params.user_id } };
    this.handleCreate = this.handleCreate.bind(this);
    this.handleUpdate = this.handleUpdate.bind(this);
    this.handleChangePage = this.handleChangePage.bind(this);
  }

  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({
            user_ledgers: paginated.user_ledgers,
            ...........

如果我对react的理解是正确的,componentDidMount中的var user_id是此代码中的本地范围变量?但是,我正在点击正确的端点并以某种方式从中获取正确的数据。这究竟是如何工作的?这是我的apiservice:

function ledgersIndex(user_id, page_number) {
  const requestOptions = {
    method: 'GET',
    headers: Object.assign({},
      authorizationHeader(), 
      { 'Content_type': 'application/json' })
  };

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

这是对rails应用程序的反应,rails路由是嵌套的

namespace :admin do
        resources :users do
          resources :user_ledgers, path: :ledgers, only: [:index, :create, :show, :update]

这个问题的关键在于只是为了理解我是如何使用本地范围的变量来达到正确的终点?为了使它不是本地范围的,我如何在我的组件和apiService中使它可用?我知道它有效,但我想正确地做,并理解它为什么有效。

reactjs react-router react-on-rails
1个回答
0
投票

你是对的,user_id是当地的范围。但是你将它传递给this.fetchData:

this.fetchData(user_id, 1);

这会调用你的fetchData方法,并且在你的fetchData方法的初始化时,就好像有这样的行发生了:

var user_id = {来自this.fetchData调用的user_id}

当你打电话给apiService.ledgersIndex时也会发生同样的事情

进一步阅读:https://scotch.io/tutorials/understanding-scope-in-javascript

© www.soinside.com 2019 - 2024. All rights reserved.