如何检查嵌套对象是否有子对象？

Question

我是Javascript / React的新手，所以不确定如何将其实现到递归函数中。我设置了一个嵌套的json对象菜单，并想添加一些小箭头，指示是否还有另一个级别需要单击。由于我的菜单由大量嵌套的json对象组成，因此我使用了递归遍历所有对象并将它们呈现为菜单。我将包括屏幕截图，以直观地说明我也想做什么。

是否有人对如何检查该对象层是否有子项有任何想法，如果有的话，添加箭头（或其他任何东西）来表明这一点？

这是我的代码：

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

  makeMenuLayer = layer => {
    const { objectKeys } = this.state;
    const layerKeys = Object.entries(layer).map(([key, value], index) => {
      return (
        <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 });
  };

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

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

这是当前的外观，我希望它在其中具有更多元素的任何元素都带有箭头或要显示的东西，以嵌套更多数据（因此，服装，配件，服装等有箭头）：

这是我要去的事情的一个例子：