javascript - 如何在 Reactjs 的菜单中设置 onClick 函数？

Question

抱歉，如果这是一个愚蠢/明显的问题，我是 Javascript/React 的新手。我正在尝试创建一个菜单，其中包含我从 API 调用中获得的 JSON 对象。由于 JSON 数据是一堆嵌套对象(我说的是数百个对象)，我想出了如何递归调用对象并使它们显示在无序列表中。我似乎无法弄清楚如何添加一个 onClick 函数，该函数在单击时将显示嵌套对象中的下一层。

我将提供一些屏幕截图，让您了解我所拥有的以及我正在努力实现的目标。递归部分使我对如何使它正常工作感到困惑。有没有人有想法？

class Menu extends React.Component {
  state = {
    categories: []
  };

  makeMenuLayer = layer => {
    const layerKeys = Object.entries(layer).map(([key, value]) => (
      <ul>
        {key}
        {this.makeMenuLayer(value)}
      </ul>
    ));
    return <div>{layerKeys}</div>;
  };

  componentDidMount() {
    axios.get("https://www.ifixit.com/api/2.0/categories").then(response => {
      this.setState({ categories: response.data });
    });
  }

  render() {
    const { categories } = this.state;
    return <div>{this.makeMenuLayer(categories)}</div>;
  }
}

这是当前显示的代码。我试图让它只显示第一层对象，然后当单击每个元素时，显示下一层。例如，如果我点击服装，它会显示配饰、服装、眼镜等，如果我点击配饰，它会显示领带和雨伞。

这是控制台中显示的我正在处理的数据的屏幕截图

Answer 1

可能不是最有效的，但我只是想使用状态来隐藏/取消隐藏嵌套对象。

试试这个

import React from 'react'

class Menu extends React.Component {
  state = {
    categories: [],
    objectKeys: null,
    tempKeys: []
  }

  makeMenuLayer = layer => {
    const { objectKeys } = this.state
    const layerKeys = Object.entries(layer).map(([key, value]) => (
      <ul key={key}>
        <div onClick={() => this.handleShowMore(key)}>{key}</div>
        {objectKeys[key] && this.makeMenuLayer(value)}
      </ul>
    ))
    return <div>{layerKeys}</div>
  }

  handleShowMore = key => {
    this.setState(prevState => ({
      objectKeys: {
        ...prevState.objectKeys,
        [key]: !this.state.objectKeys[key]
      }
    }))
  }

  initializeTempKeys = layer => {
    Object.entries(layer).map(([key, value]) => {
        const newTempKeys = this.state.tempKeys
        newTempKeys.push(key)
        this.setState({ tempKeys: newTempKeys })
        this.initializeTempKeys(value)
      }
    )
  }

  initializeObjectKeys = () => {
    const { tempKeys } = this.state
    let tempObject = {}

    tempKeys.forEach(tempKey => {
      tempObject[tempKey] = true
    })

    this.setState({ objectKeys: tempObject })
  }

  async componentDidMount () {
    const res = await fetch('https://www.ifixit.com/api/2.0/categories')
    const categories = await res.json()
    this.initializeTempKeys(categories)
    this.initializeObjectKeys()
    this.setState({ categories })
  }

  render () {
    const { categories } = this.state
    return <div>{this.makeMenuLayer(categories)}</div>
  }
}

export default Menu