在 ReactJs 代码中需要帮助 - 过滤器按钮答案

【问题标题】：Need help in ReactJs code - filter button在 ReactJs 代码中需要帮助 - 过滤器按钮
【发布时间】：2021-11-19 23:21:37
【问题描述】：

我正在尝试通过 ReactJs 创建一个过滤器按钮，花了很多时间但仍然不知道为什么它不起作用这是我的codePen：https://codepen.io/tinproht123/pen/gOxeWpy?editors=0110

  const [menuItems, setMenuItems] = React.useState(menu);
  const [categories, setCategories] = React.useState(allCategories);
  
  const filterItems = (category) =>{
    if(category === 'all'){
      setMenuItems(menu);
      return;
    }
    const newItems = menu.filter((item)=> item.category === category)
    setMenuItems(newItems);
  }
  
  return(
    <section className='container'>
      <div className='title'>
        <h1>Our menu</h1>
      </div>
      <Categories categories={categories} filterItems={filterItems}/>
      <Menu menu={menuItems}/>
    </section>
  )
}~~~

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我检查了您的代码，问题不在于您向我们展示的部分。相反，请在 codepen 上检查您的代码第 103 行。你的代码看起来像这样：

const Menu = () =>{
  return(
    <div className='menu-container'>
      {menu.map((menuItem) => {
      ....

请注意第一行，因为您的所有菜单项都保留在 menu 变量中，即使您进行了正确过滤，您也会打印 all 菜单的结果。

我看到您正在向 <Menu menu={menuItems}>.... 发送道具但你没有使用它。要使用此道具，您应该在 Menu 函数中添加一个参数；

const Menu = ({menu}) =>{
  return(
    <div className='menu-container'>
      {menu.map((menuItem) => {

就像上面一样。

【讨论】：

【解决方案2】：

在 Menu 组件中，您没有传递任何道具，而只是呈现文件顶部声明的 const 值。

您正在按类别进行过滤，但渲染未显示更新后的类别。 :)

【讨论】：