react.js-REACT - 显示和过滤特定数据

默认情况下，我只想显示状态为Pending和的数据Not started。目前，所有数据都显示在我的表中，状态如下：Good, Pending, Not started（见图）。

但我也希望有可能Good通过在按钮旁边创建Apply一个切换开关来查看状态：Show good menus，（我已经制作了一个功能Toggle.jsx），这将提供查看所有状态的可能性Good。

我真的不知道该怎么做，这就是我现在所拥有的：

  export default function MenuDisplay() {
      const { menuId } = useParams();
      const [selected, setSelected] = useState({});
      const [hidden, setHidden] = useState({});
      const [menus, setMenus] = useState([]);    
    
      useEffect(() => {
        axios.post(url,{menuId:parseInt(menuId)})
            .then(res => {
                console.log(res)
                setMenus(res.data.menus)
            })
            .catch(err => {
                console.log(err)
            })
    }, [menuId]);
    
      // If any row is selected, the button should be in the Apply state
      // else it should be in the Cancel state
      const buttonMode = Object.values(selected).some((isSelected) => isSelected)
        ? "apply"
        : "cancel";
    
      const rowSelectHandler = (id) => (checked) => {
        setSelected((selected) => ({
          ...selected,
          [id]: checked
        }));
      };
    
      const handleClick = () => {
        if (buttonMode === "apply") {
          // Hide currently selected items
          const currentlySelected = {};
          Object.entries(selected).forEach(([id, isSelected]) => {
            if (isSelected) {
              currentlySelected[id] = isSelected;
            }
          });
          setHidden({ ...hidden, ...currentlySelected });
    
          // Clear all selection
          const newSelected = {};
          Object.keys(selected).forEach((id) => {
            newSelected[id] = false;
          });
          setSelected(newSelected);
        } else {
          // Select all currently hidden items
          const currentlyHidden = {};
          Object.entries(hidden).forEach(([id, isHidden]) => {
            if (isHidden) {
              currentlyHidden[id] = isHidden;
            }
          });
          setSelected({ ...selected, ...currentlyHidden });
    
          // Clear all hidden items
          const newHidden = {};
          Object.keys(hidden).forEach((id) => {
            newHidden[id] = false;
          });
          setHidden(newHidden);
        }
      };
    
      const matchData = (
        menus.filter(({ _id }) => {
        return !hidden[_id];
      });
    
      const getRowProps = (row) => {
        return {
          style: {
            backgroundColor: selected[row.values.id] ? "lightgrey" : "white"
          }
        };
      };
    
      const data = [
        {
          Header: "id",
          accessor: (row) => row._id
        },
        {
          Header: "Name",
          accessor: (row) => (
            {row.name}
          )
        },
        {
          Header: "Description",
          //check current row is in hidden rows or not
          accessor: (row) => row.description
        },
       {
          Header: "Status",
          accessor: (row) => row.status
       },
        {
          Header: "Dishes",
          //check current row is in hidden rows or not
          accessor: (row) => row.dishes,
          id: "dishes",
          Cell: ({ value }) => value && Object.values(value[0]).join(", ")
        },
        {
          Header: "Show",
          accessor: (row) => (
            
          )
        }
      ];
    
      const initialState = {
        sortBy: [
          { desc: false, id: "id" },
          { desc: false, id: "description" }
        ],
        hiddenColumns: ["dishes", "id"]
      };
    
      return (

      );
    }

这里是我的api中的jsonmenuId:1:

  [
      {
        "menuId": 1,
        "_id": "123ml66",
        "name": "Pea Soup",
        "description": "Creamy pea soup topped with melted cheese and sourdough croutons.",
        "dishes": [
          {
            "meat": "N/A",
            "vegetables": "pea"
          }
        ],
        "taste": "Good",
        "comments": "3/4",
        "price": "Low",
        "availability": 0,
        "trust": 1,
        "status": "Pending",
        "apply": 1
      },
     //...other data
    ]