0

我的渲染函数中有一个 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>;
}
}
4

2 回答 2

0

拉我的头发两个小时后，我通过重新分配值解决了这个问题。

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

我不知道这是如何工作的，但它完成了工作。

于 2018-01-09T07:14:02.880 回答
0

let 可以是块级作用域中的变量 I 语句，相当于每个循环 I only 对当前块级作用域使用，I is only，所以 I = 1, 2, 3, 4, 5。和 Var 等价于全局作用域语句 I，在 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)
}
于 2018-01-09T09:07:28.570 回答