javascript - 如何在根据星级（声誉）过滤用户的反应js中以模式打印星形图标？

Question

我想在反应 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>;
      })}

这对过滤部分的效果很好，但在一条垂直线上只打印了 5 颗星。我想在 1 行中打印 1 颗星，在第 2 行中同样打印 2 颗星

标签： javascriptreactjsalgorithm

Answer 1

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

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

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