Javascript 根据值更改.map的输出

我的头衔可能没什么意义，但基本上我想要达到的是

每次我的.map运行时。我希望它在下一次迭代中吐出常规的“星”，然后再吐出“左星”

我正在创建一个评级组件，并决定用一个半星来作弊，只要在需要的时候翻动它。所以基本上我有星星的“切片”。但是我不确定如何使用.map或者是否可以使用.map

另外，如果你能给我一个提示，我怎样才能让它保持它的价值。就像第一个“星”是.5，然后“左星”是1，依此类推

import React, { useState } from 'react'
import {FaStarHalf} from "react-icons/all";
import './Rater.css'


const Rater = () => {
    const [rating, setRating] = useState(null)
    const [hover, setHover] = useState(null)
    const [value] = useState(100)
    const [iconValue, setIconValue] = useState(5)


    return (
        <div>
            <select onChange={(e) =>
            {setIconValue(Number(e.target.value))}}>
                { Array.from(new Array(value),(value, index) =>
                    index + 1).map(value => <option
                    key={value} value={value}>{value}</option>) }
            </select>
            <h1> Select Amount of Icons </h1>

            {[... Array(iconValue)].map((icon, i) => {
                const value = i + 1

                return (
                    <label>
                        <input type='radio'
                           name='rating'
                           value={value}
                           onClick={() => setRating(value)}
                        />
                        <FaStarHalf
                            className='star'
                            color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                            size={100}
                            onMouseEnter={() => setHover(value)}
                            onMouseLeave={() => setHover(null)}
                        />
                    </label>
                )
            })}
            {[... Array(iconValue)].map((icon, i) => {
                const value = i + 1

                return (
                    <label>
                        <input type='radio'
                            name='rating'
                            value={value}
                            onClick={() => setRating(value)}
                        />
                        <FaStarHalf
                            className='star-left'
                            color={value <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                            size={100}
                            onMouseEnter={() => setHover(value)}
                            onMouseLeave={() => setHover(null)}
                        />
                    </label>
                )
            })}
        </div>
    )

}

export default Rater

import React，{useState}来自“React”
从“react icons/all”导入{FaStarHalf}；
导入“./Rater.css”
常数率=（）=>{
常数[rating，setRating]=useState（null）
const[hover，setHover]=useState（null）
常量[值]=使用状态（100）
常量[iconValue，setIconValue]=使用状态（5）
返回(
{setIconValue（Number（e.target.value））}>
{Array.from（新数组（值），（值，索引）=>
索引+1）.map（值=>{value}）
选择图标数量
{[…数组（iconValue）].map（（图标，i）=>{
常数值=i+1
返回(
设置（值）}
/>
setHover（null）}
/>
)
})}
{[…数组（iconValue）].map（（图标，i）=>{
常数值=i+1
返回(
设置（值）}
/>
setHover（null）}
/>
)
})}
)
}
出口违约率

在初始数组上加倍并按原样映射它（删除第二个数组和映射），但在数组索引上使用模数2确定偶数/奇数，并相应地设置交替类名

i%2==0

是一个偶数，

i%2！==0是一个奇数

className={i % 2 ? "star-left" : "star"}

组成部分

const Rater = () => {
  const [rating, setRating] = useState(null);
  const [hover, setHover] = useState(null);
  const [value] = useState(100);
  const [iconValue, setIconValue] = useState(5);

  return (
    <div>
      <select
        onChange={e => {
          setIconValue(Number(e.target.value));
        }}
      >
        {Array.from(new Array(value), (value, index) => index + 1).map(
          value => (
            <option key={value} value={value}>
              {value}
            </option>
          )
        )}
      </select>
      <h1> Select Amount of Icons </h1>

      {[...Array(iconValue), ...Array(iconValue)].map((icon, i) => {
        const value = i + 1;

        return (
          <label>
            <input
              type="radio"
              name="rating"
              value={value}
              onClick={() => setRating(value)}
            />
            <FaStarHalf
              className={i % 2 ? "star-left" : "star"}
              color={value <= (hover || rating) ? "#ffc107" : "#e4e5e9"}
              size={100}
              onMouseEnter={() => setHover(value)}
              onMouseLeave={() => setHover(null)}
            />
          </label>
        );
      })}
    </div>
  );
};

const Rater=（）=>{
const[rating，setRating]=useState（null）；
const[hover，setHover]=useState（null）；
常数[值]=使用状态（100）；
const[iconValue，setIconValue]=使用状态（5）；
返回(
{
setIconValue（数字（即目标值））；
}}
>
{Array.from（新数组（值），（值，索引）=>index+1）.map(
值=>(
{value}
)
)}
选择图标数量
{[…数组（iconValue），…数组（iconValue）].map（（图标，i）=>{
常数值=i+1；
返回(
设置（值）}
/>
setHover（null）}
/>
);
})}
);
};

注意：由于阵列加倍，实际额定值为状态设置值的一半

我没有你的样式表，所以这是一个快速/粗略的演示

您是说您想要一个在“星形”和“星形左”类名之间交替的映射操作吗？或者它是一个允许半颗星的星级评定系统，即3.4级是3个实心，3.5级是3个实心和1个半？@drewerese我只想让它交替。我没有考虑使用不同的映射操作。那可能是个更好的主意。我之所以要这样做，是因为每次我在第一个“星星”上悬停时，第一个“左星星”也会突出显示。就像他们有相同的价值一样。但我没想到可能是因为他们真的这么想。有两个单独的映射操作可以解决这个问题吗？你现在有两个单独的映射操作吗？这就是让我讨厌的东西，对我来说没有任何意义。使用
className=“star”
映射一次，然后使用
className=“star left”
对相同的数据进行第二次映射。“你有你想要的东西的图片吗？”德雷雷泽让我再解释一遍，因为我似乎也在摆脱自我。这是我目前拥有的代码。我不知道如何实现这一点，但我不在乎是否使用2个映射操作。我只是给你看我所有的代码。我希望它以某种方式迭代“星”，“星左”，“星”。。。等等我不知道如何在反应中做到这一点。我使用map操作，因为这就是输出星形图标的内容。我不在乎逻辑，我只是想让自己朝着正确的方向去做。我想你可以在你的迭代中检查我是偶数还是奇数。然后，如果奇数=>star，如果偶数=>starleft；顺序取决于您要从哪个开始。您可以通过检查i%2==0（偶数）和i%2==1（奇数）来确定这一点。还是我在这里遗漏了什么？天哪，我忘了我可以用了？和：用类名。啊，太感谢你了，老兄，我会给你答案的，这样你就可以得到更多的分数了~css有什么技巧可以让它们尽可能接近吗？我把单选按钮藏起来了。如果你愿意，我可以再发一篇帖子，你也可以回复。我对你很反感CSS@4156我只是猜测你翻转了其中一些，但一个潜在的问题是，星星仍然占据着它们正常的图标空间，因此当你将内侧对接在一起时，它们会在某些地方重叠，这可能会干扰悬停/鼠标悬停。您可能需要将FA图标放置在一个容器中，溢出会隐藏多余的FA图标，然后将容器移动到您需要的位置。是的，这将超出这个问题的范围。如果你打开一个新的问题，尽管你可能会得到更多的眼睛在它无论如何。（在此处共享链接）是新问题的链接。我还添加了CSS代码。我想我从上面理解了你的意思，但我不想在我现在能修好它的时候陷入困境。