React 道具不适用于 for 循环

Posted 2023-02-23

【中文标题】React 道具不适用于 for 循环

【英文标题】：React props are not working into for loop

【发布时间】：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

【参考方案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