javascript - 在循环中 react onClick 事件

Question

我正在尝试将一些变量绑定(bind)到 React 组件内的 onClick 事件。我在 for 循环中执行此操作，因为我需要其中很多。

我的代码如下所示:

generateCells(pieData){
        var cells = []

        for(var j = 0; j < pieData.length; j++){
            var imageIndex = pieData[j].image;
            var image = [pieData[j].innerIndex, pieData[j].angle];
            console.log(image);
            var rowLength = pieData.length;
            cells.push(<Cell key={imageIndex} onClick={() => this.retake(image, rowLength)} fill={this.state.progressState[imageIndex] ? '#00C49F' : '#FF8042'}/>)
        }

        return cells;
    }

但是 onClick 事件中的 image 变量始终来自循环的最后一次迭代。这怎么可能？

感谢您的建议!

Answer 1

这是因为您正在使用 var 并且它正在创建一个作用域为您的 generateCells() 函数的变量。尝试使用 let 来查看差异(变量范围将是 for 循环)

我前段时间做了一个Codepen来查看它们之间的区别，这可能对你有帮助:https://codepen.io/ArthyFiciel/pen/rxKeQR