Javascript 组合评级组件的状态

我正在尝试制作一个星级组件。我使用三元运算符来检查状态是否为真。如果是的话，我用黄色的星星或者白色的星星。然而，这看起来像是糟糕的代码实践。与其重复所有这些三元运算符，是否有可能以某种方式组合条件，只渲染那些状态为真的黄星

const [oneStar, setOneStar] = useState(false);
const [twoStar, setTwoStar] = useState(false);
const [threeStar, setThreeStar] = useState(false);
const [fourStar, setFourStar] = useState(false);
const [fiveStar, setFiveStar] = useState(false);

const ratings = [
    1,2,3,4,5
]

const setRating = (rating: number) => {
  console.log('rating', rating);
  if(rating == 1){
      setOneStar(true);
      setTwoStar(false);
      setThreeStar(false);
      setFourStar(false);
      setFiveStar(false);
  }
  if(rating == 2){
    setOneStar(true);
    setTwoStar(true);
    setThreeStar(false);
    setFourStar(false);
    setFiveStar(false);
}
if(rating == 3){
    setOneStar(true);
    setTwoStar(true);
    setThreeStar(true);
    setFourStar(false);
    setFiveStar(false);
}
if(rating == 4){
    setOneStar(true);
    setTwoStar(true);
    setThreeStar(true);
    setFourStar(true);
    setFiveStar(false);
}
if(rating == 5){
    setOneStar(true);
    setTwoStar(true);
    setThreeStar(true);
    setFourStar(true);
    setFiveStar(true);
}
};

return (
<View style={styles.ratingContainer}>
    <TouchableOpacity onPress={() => setRating(1)}>
        {oneStar ? 
      <Icon name= "star" color='#ebba34' size={moderateScale(13)} /> : <Icon name= "star-o" size={moderateScale(13)} />}
    </TouchableOpacity>
    <TouchableOpacity onPress={() => setRating(2)}>
        {twoStar ? 
      <Icon name= "star" color='#ebba34' size={moderateScale(13)} /> : <Icon name= "star-o" size={moderateScale(13)} />}
    </TouchableOpacity>
    <TouchableOpacity onPress={() => setRating(3)}>
        {threeStar ? 
      <Icon name= "star" color='#ebba34' size={moderateScale(13)} /> : <Icon name= "star-o" size={moderateScale(13)} />}
    </TouchableOpacity>
    <TouchableOpacity onPress={() => setRating(4)}>
        {fourStar ? 
      <Icon name= "star" color='#ebba34' size={moderateScale(13)} /> : <Icon name= "star-o" size={moderateScale(13)} />}
    </TouchableOpacity>
    <TouchableOpacity onPress={() => setRating(5)}>
        {fiveStar ? 
      <Icon name= "star" color='#ebba34' size={moderateScale(13)} /> : <Icon name= "star-o" size={moderateScale(13)} />}
    </TouchableOpacity>
</View>
);
};

const[oneStar，setOneStar]=useState（false）；
const[twoStar，setTwoStar]=useState（false）；
const[threeStar，setThreeStar]=useState（false）；
const[fourStar，setFourStar]=useState（false）；
const[fiveStar，setFiveStar]=使用状态（false）；
常数额定值=[
1,2,3,4,5
]
常量设置等级=（等级：编号）=>{
console.log（“评级”，评级）；
如果（评级==1）{
setOneStar（真实）；
setTwoStar（假）；
setThreeStar（假）；
setFourStar（假）；
setFiveStar（假）；
}
如果（评级==2）{
setOneStar（真实）；
setTwoStar（真）；
setThreeStar（假）；
setFourStar（假）；
setFiveStar（假）；
}
如果（评级==3）{
setOneStar（真实）；
setTwoStar（真）；
setThreeStar（真）；
setFourStar（假）；
setFiveStar（假）；
}
如果（评级==4）{
setOneStar（真实）；
setTwoStar（真）；
setThreeStar（真）；
setFourStar（真）；
setFiveStar（假）；
}
如果（评级==5）{
setOneStar（真实）；
setTwoStar（真）；
setThreeStar（真）；
setFourStar（真）；
setFiveStar（真）；
}
};
返回(
设定值（1）}>
{一星？
: }
设定值（2）}>
{双星？
: }
设定值（3）}>
{三星？
: }
设定值（4）}>
{fourStar？
: }
设定值（5）}>
{fiveStar？
: }
);
};

类似这样的内容：

const [stars, setStars] = useState(1);

...        

{
  [1, 2, 3, 4, 5].map((x, i) => (
    <TouchableOpacity onPress={() => setStars(i)}>
      {stars <= i ? (
        <Icon name="star" color="#ebba34" size={moderateScale(13)} />
      ) : (
        <Icon name="star-o" size={moderateScale(13)} />
      )}
    </TouchableOpacity>
  ));
}

const[stars，setStars]=useState（1）；
...        
{
[1,2,3,4,5].map（（x，i）=>(
setStars（一）}>
{stars您可以为此使用一个数字

const [stars, setStars] = useState(0);

然后使用这个
setStars
方法。不需要
setRating
和所有这些重复

   <TouchableOpacity onPress={() => setStars(1)}>
        {stars <= 1 ? 
      <Icon name= "star" color='#ebba34' size={moderateScale(13)} /> : <Icon name= "star-o" size={moderateScale(13)} />}
    </TouchableOpacity>

setStars（1）}>
{stars你可以这样做的一种方法是，当用户点击一个特定的星星时，只记录有多少星星被“选中”

function Rating() {
  const [stars, setStars] = React.useState(0);
  const ratings = [1, 2, 3, 4, 5];

  return (
    <View style={styles.ratingContainer}>
      {/* Iterate through all `ratings` and render stars for each */}
      {ratings.map(rating => (
        <TouchableOpacity key={rating} onPress={() => setStars(rating)}>
          {/* If `stars` is not 0 and `rating` is less than or equal 
              to the number of `stars`, then show a selected star */}
          {stars !== 0 && rating <= stars ? (
            <Icon name="star" color="#ebba34" size={moderateScale(13)} />
          ) : (
            <Icon name="star-d" size={moderateScale(13)} />
          )}
        </TouchableOpacity>
      ))}
    </View>
  );
}

功能评级（）{
常数[stars，setStars]=React.useState（0）；
常数评级=[1,2,3,4,5]；
返回(
{/*遍历所有“评级”并为每个*/}渲染星星
{ratings.map（rating=>(
设定值（额定值）}>
{/*如果'stars'不为0且'rating'小于或等于
到“星号”的数目，然后显示选定的星号*/}
{stars！==0&&rating
const rating=（）=>{
常数[currentRating，setRating]=使用状态（0）；
常量样式=评级=>{
返回{
宽度：“20px”，
高度：“20px”，
边框：“1px实心”，
背景颜色：星星>=评级？“绿色”：“红色”
};
};
常数率=[1,2,3,4,5]；
常数星=速率。映射（速率=>{
返回电流额定值>=额定值(
设定值（速率）}>
) : (
设定值（速率）}>
);
});
返回{stars}；