Javascript 按类别筛选项目-反应

我有一个按类别组织的帖子列表。目前，它会在页面上列出它们，如下所示：

Leisure
    -leisure post 1
    -leisure post 2
    -leisure post 3
Sports
    -sports post 1
    -sports post 2
    -sports post 3
...and so on (these are not the exact categories and posts, just and example of how they are listed on the page right now)

它是使用以下组件创建的：

const Posts = ({ state }) => {
  const postsPerCategory = getPostsGroupedByCategory(state.source);

  return (
    <>
      {postsPerCategory.map(({ category }, index) => {
        return (
          <button key={index}>{category.name}</button>
        )
      })}

      {postsPerCategory.map(({ posts, category }, index) => {
        return (
          <div key={index}>
            <h4>{category.name}</h4>
            {posts.map((post, index) => {
              return (
                <article key={index}>
                  {post.title.rendered}
                </article>
              )
            })}
          </div>
        )
      })}
    </>
  )
}

---

如何创建完成我所寻找的功能？

在本例中，使用钩子仅适用于category.name本身，因此您可以设置如下钩子：

const [categoryName, setCategoryName] = useState(yourDefaultCategory);

然后，在按钮内部，只需添加一个调用setCategoryName（category.name）的onclick事件，如下所示：

setCategoryName（category.name）}>
{category.name}

要使其对列表产生任何影响，您需要按类别筛选地图列表，如下所示：

{postsPerCategory.map(({ posts, category }, index) => {
        return categoryName === category.name? (
          <div key={index}>
            <h4>{category.name}</h4>
            {posts.map((post, index) => {
              return (
                <article key={index}>
                  {post.title.rendered}
                </article>
              )
            })}
          </div>
        ) : null
      })}

{postsPerCategory.map（{posts，category}，index）=>{
return categoryName==category.name(
{category.name}
{posts.map（（post，index）=>{
返回(
{post.title.rendered}
)
})}
)：null
})}

---

我还没有测试以上，但它应该工作良好。您也可以考虑使用过滤器而不是MAP。会更干净一些。

我会创建一个

状态

，用于跟踪是否选择了每个类别

const[isSelected，setIsSelected]=useState（{}）；

您应该在应用程序首次呈现时初始化此状态。这可以通过

useffect

完成

useffect（（）=>{
const isSelected={}；
const categoryNames=postercategory.map（{category}=>category.name）；
forEach（categoryName=>isSelected[categoryName]=false）
setIsSelected（isSelected）；
}, [])

然后单击按钮时，应切换选中状态，如下所示

setIsSelected（{…isSelected，
[category.name]：！isSelected[category.name]}>
{category.name}

最后，如果选中类别，则渲染该类别

{
postsPerCategory.filter（{category}=>isSelected[category.name]）
.map（{category}=>{
//在这里渲染
})
}

根据第一个答案，您可以将默认类别名称设置为“all”，然后检查categoryName===“all”的值，如果为真，则映射所有postsPerCategory，否则在映射函数中检查categoryName===category.name。这可能不是最有效的解决方案，但它确实有效

{
   categoryName==='all'? postsPerCategory.map(({ posts, category }, index) => 
     (
      <div key={index}>
        <h4>{category.name}</h4>
        {posts.map((post, index) => {
          return (
            <article key={index}>
              {post.title.rendered}
            </article>
          )
        })}
      </div>
     ) : postsPerCategory.map(({ posts, category }, index) => {
    return categoryName === category.name? (
      <div key={index}>
        <h4>{category.name}</h4>
        {posts.map((post, index) => {
          return (
            <article key={index}>
              {post.title.rendered}
            </article>
          )
        })}
      </div>
    ) : null
  })
 
}

{
categoryName=='all'？postsPerCategory.map（{posts，category}，index）=>
(
{category.name}
{posts.map（（post，index）=>{
返回(
{post.title.rendered}
)
})}
)：postsPerCategory.map（（{posts，category}，index）=>{
return categoryName==category.name(
{category.name}
{posts.map（（post，index）=>{
返回(
{post.title.rendered}
)
})}
)：null
})
}

与上一个建议的解决方案相比，此解决方案有什么好处？看起来在上一个答案中，您只能显示一个类别，这是由最后选择的按钮决定的。我以为您希望在选择多个类别时显示多个类别。啊，好的，谢谢。我一次只需要选择一个类别，但是这是错误的如果能够同时查看所有帖子，那就太好了。根据控制台，我不确定这是否可行。原始图像中的log（postsPerCategory）返回您知道我将如何包括一个查看所有帖子的默认按钮吗？根据我看到的一些其他示例，似乎我需要按“查看所有帖子”按钮？基于控制台，我不确定这是否可行。原始图像中的日志（postsPerCategory）返回请提供一个运行示例链接，如codepen或codesandbox，以提高可见性。

{postsPerCategory.map(({ posts, category }, index) => {
        return categoryName === category.name? (
          <div key={index}>
            <h4>{category.name}</h4>
            {posts.map((post, index) => {
              return (
                <article key={index}>
                  {post.title.rendered}
                </article>
              )
            })}
          </div>
        ) : null
      })}

{
   categoryName==='all'? postsPerCategory.map(({ posts, category }, index) => 
     (
      <div key={index}>
        <h4>{category.name}</h4>
        {posts.map((post, index) => {
          return (
            <article key={index}>
              {post.title.rendered}
            </article>
          )
        })}
      </div>
     ) : postsPerCategory.map(({ posts, category }, index) => {
    return categoryName === category.name? (
      <div key={index}>
        <h4>{category.name}</h4>
        {posts.map((post, index) => {
          return (
            <article key={index}>
              {post.title.rendered}
            </article>
          )
        })}
      </div>
    ) : null
  })
 
}