[英]InfernoJS/ReactJS - Why is my for loop returning the same index in my render?
我的渲染函数中有一个for循环,它应该从fontawesome库中渲染5星,评级为3应该渲染3个全星和2个空星。
我遇到的问题是我的迭代器“ i”对所有变量都返回5。 在我的onClick处理程序中。 但是真正奇怪的是,如果对元素使用相同的迭代器变量“ i”作为id或任何其他自定义属性,它将显示正确的1,2,3,4或5。为什么会发生这种情况?
import Component from "inferno-component";
import styles from "./styles";
export default class StarRating extends Component {
constructor() {
super();
this.state = {
rating: 3
};
}
rate = rating => {
console.log(rating);
this.setState({
rating: rating
});
};
render() {
var stars = [];
for (var i = 0; i < 5; i++) {
var klass = "fa fa-star";
if (this.state.rating <= i && this.state.rating != null) {
klass += "-o";
}
stars.push(
<i
style={styles.star}
className={klass}
id={i}
aria-hidden="true"
onClick={() => this.rate(i)}
/>
);
}
return <span>{stars}</span>;
}
}
拉了两个小时后,我通过重新分配值来解决了这个问题。
render() {
var stars = [];
for (var i = 0; i < 5; i++) {
var klass = "fa fa-star";
if (this.state.rating <= i && this.state.rating != null) {
klass += "-o";
}
let id = i + 1;
stars.push(
<i
style={styles.star}
className={klass}
id={i}
aria-hidden="true"
onClick={() => this.rate(id)}
/>
);
}
return <span>{stars}</span>;
}
我不知道这是如何工作的,但它确实完成了工作。
让我们可以在块级范围中使用变量I语句,仅使用每个周期I等效于当前块级范围,而I仅为等效值,因此I = 1、2、3、4、5。全局作用域语句I,在I参考周期相同之后,我始终等于5。您还可以使用闭包来缓存I或使用let i而不是var i循环,就像这样
for (let i = 0; i < 5; i++) {
var klass = "fa fa-star";
if (this.state.rating <= i && this.state.rating != null) {
klass += "-o";
}
stars.push(
<i
style={styles.star}
className={klass}
id={i}
aria-hidden="true"
onClick={() => this.rate(i)}
/>
);
}
for (var i = 0; i < 5; i++) {
(function(i){
var klass = "fa fa-star";
if (this.state.rating <= i && this.state.rating != null) {
klass += "-o";
}
stars.push(
<i
style={styles.star}
className={klass}
id={i}
aria-hidden="true"
onClick={() => this.rate(i)}
/>
);
})(i)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.