时间戳

首页 > 解决方案 > 嵌套路由反应使用局部范围变量？

reactjs - 嵌套路由反应使用局部范围变量？

问题描述

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

    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 是此代码中的局部范围变量？但是，我正在到达正确的端点并以某种方式从中获取正确的数据。这到底是如何工作的？这是我的api服务： 

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 中可用？我知道它在工作，但我想正确地做，并理解它为什么工作。

标签： reactjsreact-routerreact-on-rails

解决方案

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

this.fetchData(user_id, 1);

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

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

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

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

推荐阅读