javascript - 为什么单击按钮后重新排序不起作用？

Question

我有菜单选项(有文本和按钮)，我必须在单击按钮时打开菜单选项。 您能告诉我为什么当我单击按钮时重新渲染不起作用

https://codesandbox.io/s/angry-albattani-qvtec

const HeaderFilter = ({ menu }) => {
  const { type, open } = menu;
  const showFilters = () => {
    switch (type) {
      case "text":
        break;
      case "dropdown":
        const cls = open ? "open" : "";
        return (
          <div className={`primary-filter ${cls}`}>
            <p>
              <button
                className={`icon-chevron-left ${cls}`}
                onClick={() => {
                  menu.open = !open;
                }}
              >
                open
              </button>
            </p>
            <ul className="primary-filter--menu">
              {menu.options.map(i => (
                <li>
                  <Checkbox
                    value={i}
                    inputProps={{ "aria-label": "primary checkbox" }}
                  />
                  {i}
                </li>
              ))}
            </ul>
          </div>
        );
    }
  };

  return <>{showFilters()}</>;
};

export default HeaderFilter;

Answer 1

import React from "react";
import { useState } from "react";
import Checkbox from "@material-ui/core/Checkbox";

const HeaderFilter = ({ menu }) => {
  const { type } = menu;
  const [open, setopen] = useState(menu.open);

  const showFilters = () => {
    switch (type) {
      case "text":
        break;
      case "dropdown":
        const cls = open ? "open" : "";
        return (
          <div className={`primary-filter ${cls}`}>
            <p>
              <button
                className={`icon-chevron-left ${cls}`}
                onClick={() => setopen(!open)}
              >
                open
              </button>
            </p>
            <ul className="primary-filter--menu">
              {menu.options.map(i => (
                <li>
                  <Checkbox
                    value={i}
                    inputProps={{ "aria-label": "primary checkbox" }}
                  />
                  {i}
                </li>
              ))}
            </ul>
          </div>
        );
    }
  };

  return <>{showFilters()}</>;
};

export default HeaderFilter;

https://codesandbox.io/s/hopeful-bird-h8wuv