嵌套路由反应使用局部范围变量？答案

【问题标题】：Nested Route React working with a Local scoped variable?嵌套路由反应使用局部范围变量？
【发布时间】：2019-03-15 17:25:21
【问题描述】：

是的，所以我不知道为什么这是有效的，但不知何故？我对反应很陌生，只想了解我做错了什么或如何纠正。这是我的反应代码 sn-p：

    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]

这个问题的重点实际上只是为了了解我如何使用本地范围的 var 达到正确的终点？为了使它不在本地范围内，我如何使它在我的组件和 apiService 中可用？我知道它有效，但我想正确地执行它，并理解它为什么有效。

【问题讨论】：

标签： reactjs react-router react-on-rails

【解决方案1】：

你说得对，user_id 是本地范围的。但随后您将其传递给 this.fetchData：

this.fetchData(user_id, 1);

这会调用您的 fetchData 方法，并且在您的 fetchData 方法初始化时，就好像发生了这行：

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

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

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

【讨论】：

感谢您的澄清和资源！