Javascript 如何在react js中打印星号图标，根据星号（声誉）过滤用户？

我想在react js中打印星星图标，就像在第一行1和第二行2中一样

我试过了

  const [userList, setUsersList] = useState([]);
  const [starClicked, setStarClicked] = useState();
  return (
   <div className="App">
     {[...Array(5)].map((star, idx) => {
       return (
         <p key={idx} onClick={() => setStarClicked(idx + 1)}>
           <StarOutlinedIcon />
         </p>
       );
     })}

    {starClicked
    ? userList
        .filter((d) => d.stars === starClicked)
        .map((d) => {
          return <li key={d._id}> {d.userName} </li>;
        })
    : userList.map((d) => {
        return <li key={d._id}> {d.userName} </li>;
      })}

const[userList，setUsersList]=useState（[]）；
const[starClicked，setStarClicked]=useState（）；
返回(
{[…数组（5）].map（（星形，idx）=>{
返回(
setStarClicked（idx+1）}>

);
})}
{starClicked
？用户列表
.filter（（d）=>d.stars===starClicked）
.map（（d）=>{
返回
{d.userName}
；
})
：userList.map（（d）=>{
返回
{d.userName}
；
})}

---

这在过滤部分做得很好，但在垂直线中只打印5颗星。我想在1行中打印1颗星，在第2行中打印2颗星同样

您需要另一个循环来根据星星的索引渲染星星：

{[...Array(5)].map((star, idx) => {
    const actualIndex = idx + 1;

    return (
        <p key={idx} onClick={() => setStarClicked(actualIndex)}>
            {[...Array(actualIndex)].map((_, starIdx) => (
                <StarOutlinedIcon key={starIdx} />
            ))}
        </p>
    );
})}

{[…数组（5）].map（（星形，idx）=>{
const-actualIndex=idx+1；
返回(
setStarClicked（实现索引）}>
{[…数组（实现索引）].map（（\ux，starIdx）=>(
))}

);
})}

非常感谢你，伙计