React 道具不适用于 for 循环答案

【问题标题】：React props are not working into for loopReact 道具不适用于 for 循环
【发布时间】：2021-10-02 21:43:12
【问题描述】：

当我将评级作为道具传递给 Star Rating 组件时，我可以在 StarRating 函数中找到评级值，但无论何时进入 for 循环评级都变得不可见。

import React from 'react'

const StarRating = ({ rating }) => {
const stars = [];
for (let j; j <= 5; j++) {
    if (j <= 3) {
        stars.push(<i className="fas fa-start"></i>);
    } else if (j === Math.ceil(rating) && !Number.isInteger(rating)) {
        stars.push(<i className="fas fa-star-half-alt"></i>);
    } else {
        stars.push(<i className="fas fa-star"></i>);
    }
}
return (
    <div>
        {stars}
    </div>
)
}

export default StarRating

【问题讨论】：

标签： javascript reactjs for-loop components react-props

【解决方案1】：

"j" 必须在你的 For 循环中初始化。

for(let j = 1;j <=5; j++)
{ 
  /*your logic here*/ 
}

【讨论】：

【解决方案2】：

尝试使用像 {...rating} 这样的扩展运算符更新破坏对象，并且循环中的变量初始化是强制性的。

import React from 'react'

const StarRating = ({...rating }) => {
const stars = [];
for (let j=0; j <= 5; j++) {
    if (j <= 3) {
        stars.push(<i className="fas fa-start"></i>);
    } else if (j === Math.ceil(rating) && !Number.isInteger(rating)) {
        stars.push(<i className="fas fa-star-half-alt"></i>);
    } else {
        stars.push(<i className="fas fa-star"></i>);
    }
}
return (
    <div>
        {stars}
    </div>
)
}

export default StarRating

【讨论】：