Question

我的渲染函数中有一个for循环，它可以渲染来自fontawesome库的5颗星，等级为3应该渲染3颗满星和2颗空星....

我遇到的问题是我的迭代器“i”为所有这些返回5。至少在我的onClick处理程序中。但真正奇怪的是，如果使用相同的迭代器变量“i”作为id或元素的任何其他自定义prop，它会显示正确的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 = 1,2,3,4,5和在全局范围语句I中等效的var，在I引用循环之后是相同的，我总是等于5 ..你也可以使用一个闭包来缓存我或者使用let i而不是var i in循环，就像这样

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

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

2 个答案: