Question

我有一个组件进行AJAX调用以获取一些数据。此后，它通过for循环处理，并创建一个数组如下：

        var path = '/clinic/'+d.id;
    res.push(
      <Tappable className='clinic' onTap={() => router.transitionTo(path, i)}>
        <div id='name'>{d.name}</div>
        <div>{d.address}</div>
        <div>{ms}</div>
        <span>Timings: {d.timings.value_formatted} - {d.timings.value2_formatted}</span>
      </Tappable>
      );

除链接外，所有数据都正确呈现。数组中的所有项都链接到数组中最后一项的ID。

e.g。

如果有10个身份证号为1-10的物品，理想情况下物品应链接到诊所/ 1，诊所/ 2等。但是，所有物品都被送往诊所/ 10。

路线定义如下：

import './theme';
import { router, route } from 'reapp-kit';
router(require,
  route('home', '/',
    route('clinics'),
    route('Clinic', 'clinic/:id'),
    route('search')
  )
);

以下是完整文件：https://gist.github.com/fotuzlab/6e5ef4c98db678190d98

Answer 1

对我而言似乎是一个经典的＆＃34; for循环闭包问题＆＃34;。由于变量在Javascript中具有函数范围，因此path和i变量实际上是每次迭代的相同变量。为onTap匿名函数处理程序创建一个闭包，因此每个匿名函数引用其闭包中的相同变量，这些变量将在循环结束后将最后一个值赋给变量。

您可以通过使用立即调用的函数表达式（IIFE）解决此问题，该表达式将每个唯一值绑定到循环中每次迭代的新变量（IIF的参数），如下所示：

onTap={((iPath, j) => () => router.transitionTo(iPath, j))(path, i)}

或者，如果有可能使用ES6（如果您正在使用Babel.js或其他一些转换器，或者只关心支持兼容的浏览器），您可以使用新的let关键字给变量块作用域而不是函数作用域，如下所示：

for (let i = 0; i < this.state.clinics.count; i++) {
    var ms = '';
    d = this.state.clinics.data[i];
    if (d.medical_scheme) {
        $.map(d.medical_scheme, function(val, i){
            ms += val.label + ' ';
        });
    }
    let path = '/clinic/'+d.id;
    res.push(
        <Tappable className='clinic' onTap={() => router.transitionTo(path, i)}>
            <div id='name'>{d.name}</div>
            <div>{d.address}</div>
            <div>{ms}</div>
            <span>Timings: {d.timings.value_formatted} - {d.timings.value2_formatted}</span>
         </Tappable>
     );
}

在ReactJS中路由行为不端

1 个答案: