显示/隐藏 array.map() reactJS 的一项答案

【问题标题】：Show/Hide an item of array.map() reactJS显示/隐藏 array.map() reactJS 的一项
【发布时间】：2021-10-14 07:15:16
【问题描述】：

当我点击“菜单1”时，所有的子菜单也会显示出来但我想要的是仅显示/隐藏项目的选定 sunMenu。（即）如果我单击“菜单 2”，则仅显示“子菜单 3” 我的代码：

    this.state = {
      menu: [
        {
          id: 1,
          title: "Menu 1",
          subMenu: [
            {
              id: 3,
              title: "SubMenu 1"
            },
            {
              id: 4,
              title: "SubMenu 2"
            }
          ]
        },
        {
          id: 2,
          title: "Menu 2",
          subMenu: [
            {
              id: 5,
              title: "SubMenu 3"
            }
          ]
        }
      ],
      isHidden: true
    };
  }
  toggleHidden = () =>
    this.setState((prevState) => ({ isHidden: !prevState.isHidden }));


    return (
      <div>
        {menu.map((m) => (
          <div>
            <p onClick={this.toggleHidden}>{m.title}</p>

            {!this.state.isHidden &&
              m.subMenu.map((s) => (
                <div>
                  <p>{s.title}</p>
                </div>
              ))}
          </div>
        ))}
      </div>
    );
  }

工作示例：https://codesandbox.io/s/jovial-sinoussi-4rgci?file=/src/App.js

【问题讨论】：

标签： arrays reactjs

【解决方案1】：

不是这个

{menu.map((m) => (
          <div>
            <p onClick={this.toggleHidden}>{m.title}</p>

            {!this.state.isHidden &&
              m.subMenu.map((s) => (
                <div>
                  <p>{s.title}</p>
                </div>
              ))}
          </div>
        ))}

您应该将每个元素 od menu 映射到状态具有 isHidden 字段的 Comonent

现在所有子菜单都有 1 个状态

【讨论】：

【解决方案2】：

const [selected , setSelected] = useState(false)

您可以创建一个状态来告知何时选择了子菜单。然后为每个元素添加一个selected : {slected} 属性。

那么您应该使用m.subMenu.filter 而不是使用m.subMenu.map 并返回所有将selected 设置为true 的元素

【讨论】：