Javascript ReactJS中的路由错误

我有一个组件，它通过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>
      );

---

以下是完整的文件：

在我看来，它就像一个经典的“for循环闭包问题”。由于变量在Javascript中具有函数作用域，因此您的

path

和

i

变量对于每个迭代实际上都是相同的变量。将为您的

onTap

匿名函数处理程序创建一个闭包，因此每个匿名函数引用其闭包中的相同变量，这些变量将在循环结束后为变量分配最后一个值

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

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

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>
     );
}

或者如果有可能使用ES6（如果您使用的是Babel.js或其他transpiler，或者只关心支持兼容的浏览器），您可以使用新的

let

关键字为变量指定块范围，而不是函数范围，如下所示：

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

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>
     );
}

for（设i=0；i
{d.name}
{d.address}
{ms}
计时：{d.Timings.value\u格式的}-{d.Timings.value2\u格式的}
);
}