如何使用过滤器控制复选框？
如何使用过滤器控制复选框？
提问于 2021-12-19 18:11:36
如果post id与来自另一个数组的id相同，我想要使一个可控制的复选框变为真，但我不知道如何做。当您单击复选框时，post id将添加到书签数组中，因此我希望使其可控。
从redux商店获得id的数组：
const bookmarksData = useSelector((state) => state.bookmark.bookmarksData);数组如下所示：
[
{
"id": 5
},
{
"id": 2
},
{
"id": 19
},
{
"id": 22
},
{
"id": 23
},
{
"id": 21
}
]我用map显示的帖子，在循环中，我尝试向checked中添加一个过滤器函数，它将查找匹配的id，如果它们匹配，则将其放入true，但在此函数之后，所有选中的都变为真。我真的不明白问题是什么，为什么所有的帖子都被选中了
//code outside the loop
const setChecked = (idS) => {
bookmarksData.filter((e) => e.id === idS) ? true : false
}
//the code in the loop where I display the posts
<Checkbox
icon={<BookmarkBorderIcon />}
checkedIcon={<BookmarkIcon />}
checked={() => setChecked(id)}
onClick={() => savedBokmark({ id })}
/>
您能告诉我问题出在哪里吗?如何使复选框与过滤一起正常工作？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-12-19 18:41:27
您需要直接设置布尔值。
checked={setChecked(id)}同样在setChecked函数中，您可以执行以下修改。否则，当没有匹配的元素时，它返回空数组，该数组仍然为true。
const setChecked = (idS) => Boolean(bookmarksData.find((e) => e.id === idS));Stack Overflow用户
发布于 2021-12-19 18:20:32
签入复选框组件需要一个布尔值，所以您可以这样做
//循环中显示posts的代码
<Checkbox
icon={<BookmarkBorderIcon />}
checkedIcon={<BookmarkIcon />}
checked={setChecked(id)}
onClick={() => savedBokmark({ id })}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70414110
复制相关文章
相似问题
腾讯云开发者
