InfernoJS / ReactJS-為什么我的for循環在渲染中返回相同的索引？

Question

我的渲染函數中有一個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>;
}
}

Answer 1

拉了兩個小時后，我通過重新分配值來解決了這個問題。

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

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

Answer 2

讓我們可以在塊級范圍中使用變量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)
}