如何在一个模式中打印明星图标，根据明星(声誉)过滤用户的js？
如何在一个模式中打印明星图标，根据明星(声誉)过滤用户的js？
提问于 2021-01-07 03:52:32
我想打印明星图标在反应js，就像在第1行和第2行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行同样。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-07 04:17:11
您需要另一个循环按照它们的索引来呈现星星：
{[...Array(5)].map((star, idx) => {
const actualIndex = idx + 1;
return (
<p key={idx} onClick={() => setStarClicked(actualIndex)}>
{[...Array(actualIndex)].map((_, starIdx) => (
<StarOutlinedIcon key={starIdx} />
))}
</p>
);
})}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65611888
复制相关文章
点击加载更多
相似问题
如果满足某些条件，则从元组列表中删除元组。
如果满足某些条件，则从包含元组列表的列表中删除元组。
如果元素出现在字符串列表中，则从元组列表中获取元组。
根据给定的准则从元组列表中删除元组
从元组列表中组合元组元素。元组元素是元组和列表。
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
