Question

我正在尝试按类别过滤使用React的博客的帖子。数据如下所示：

const posts = [
  {
    "categories": [
      {
        "title": "tag1"
      },
      {
        "title": "tag2"
      },
      {
        "title": "tag3"
      }
    ],
    "title": "First post",
    // more stuff here
  },
  {
    "categories": [
      {
        "title": "tag2"
      },
      {
        "title": "tag3"
      },
      {
        "title": "tag4"
      },
      {
        "title": "tag5"
      }
    ],
    "title": "Second post"
    // more stuff here
  },
  {
    "categories": [
      {
        "title": "tag1"
      },
      {
        "title": "tag3"
      },
      {
        "title": "tag4"
      }
    ],
    "title": "Third post"
    // more stuff here
  },
  {
    "categories": [
      {
        "title": "tag1"
      },
      {
        "title": "tag2"
      },
      {
        "title": "tag4"
      },
      {
        "title": "tag5"
      }
    ],
    "title": "Fourth post"
    // more stuff here
  }
]

我有一个状态叫做filter，它是从<select>菜单更新的，看起来像这样： const [filter, setFilter] = useState('all');

我将如何编写此代码块的其余部分？

useEffect(() => {
  if (filter !== 'all') {
    // Not sure what to do here
}
}, [])

不确定是否在第一个数组上使用过滤器，还是一直使用过滤器？我已经尝试了很多方法，但是还无法使它正常工作。

Answer 1

这是您可以像这样过滤对象的方式：

const posts = [
  {
    "categories": [
      {
        "title": "tag1"
      },
      {
        "title": "tag2"
      },
      {
        "title": "tag3"
      }
    ],
    "title": "First post"
  },
  {
    "categories": [
      {
        "title": "tag2"
      },
      {
        "title": "tag3"
      }
    ],
    "title": "Second Post"
  }
];

const filter = "tag1";

const filtered = posts.filter(post => {
  return post.categories.some(cat => cat.title === filter)
});

console.log(filtered);

现在在功能组件中，实际上不需要使用效果，这是在每次渲染组件时都可以在您的状态上简单地运行：

function MyComponent() {
  const [filter, setFilter] = useState("all");

  const filtered =
    filter === "all"
      ? posts
      : posts.filter((post) => {
          return post.categories.some((cat) => cat.title === filter);
        });

  return <>Render stuff here</>
}

如果组件更新太多，并且过滤器运行过多，则可以使用useMemo钩子来记住该值，直到filter更改为止。

通过深度嵌套数组中的值过滤数组

1 个答案: