JSX循环中onClick方法的参数赋值问题咨询

嘿，我完全懂你遇到的这个坑——这其实是JavaScript里var声明变量带来的经典闭包问题！

你现在的代码里，循环中用var声明的i和page_index是函数级作用域的变量，所有的onClick回调函数都会共享同一个page_index引用。等循环结束后，page_index已经变成了最后一次循环计算出来的值，所以不管你点击哪一行，都会调用props.changePage传入这个最终值，而不是你期望的每一行对应的那个page_index + i。

下面给你几个靠谱的解决方案：

方案1：用let创建块级作用域（最推荐） #

ES6的let是块级作用域，每次循环迭代都会创建一个新的变量实例，这样每个onClick回调就能捕获到当前迭代的那个值：

var rows = []; 
var page_index = 10; 
for (let i = 0; i < 6; i++) { 
  // 每次循环都会生成独立的currentPageIndex
  let currentPageIndex = page_index + i; 
  rows.push(<ObjectRow key={i} onClick={() => props.changePage(currentPageIndex)}/>); 
}

方案2：用立即执行函数（IIFE）兼容旧环境 #

如果你的项目还需要兼容不支持ES6的环境，可以用IIFE来为每次循环创建独立的作用域：

var rows = []; 
var page_index = 10; 
for (var i = 0; i < 6; i++) { 
  // 把当前的i传入IIFE，创建独立作用域
  (function(currentIteration) {
    var currentPageIndex = page_index + currentIteration; 
    rows.push(<ObjectRow key={i} onClick={() => props.changePage(currentPageIndex)}/>); 
  })(i);
}

方案3：让子组件处理参数传递 #

你也可以把目标页码作为props传给ObjectRow，然后在子组件内部触发点击时带上这个props值，这样也能绕开闭包问题：

先修改ObjectRow组件：

function ObjectRow({ key, pageIndex, onPageChange }) {
  // 子组件内部处理点击，传入自己的pageIndex
  return <div onClick={() => onPageChange(pageIndex)}>...</div>;
}

然后循环里这样写：

var rows = []; 
var page_index = 10; 
for (var i = 0; i < 6; i++) { 
  let currentPageIndex = page_index + i; 
  rows.push(<ObjectRow key={i} pageIndex={currentPageIndex} onPageChange={props.changePage}/>); 
}

这几种方案都能解决你的问题，其中方案1是最简洁现代的写法，推荐优先使用~

内容的提问来源于stack exchange，提问作者aircow33