Javascript 如何向具有子菜单的菜单元素添加箭头？

我试图在我的菜单中有子项的每个项目旁边添加一个箭头（即，我想指出您可以单击该元素以显示该类别中的更多数据）。菜单中填充了来自API的json数据，因为它有太多嵌套对象，所以我决定使用递归使其工作。但是现在我很难只在包含更多数据的元素中添加箭头，而不是菜单中的每个元素

有人知道我如何更改它，使箭头只显示在需要它的元素旁边吗？见下图

class Menu extends React.Component {
  state = {
    devices: [],
    objectKey: null,
    tempKey: []
  };

这就是我现在添加箭头的地方

  createMenuLevels = level => {
    const { objectKey } = this.state;
    const levelKeys = Object.entries(level).map(([key, value]) => {
      return (
        <ul key={key}>
          <div onClick={() => this.handleDisplayNextLevel(key)}>{key} <FontAwesome name="angle-right"/> </div>
          {objectKey[key] && this.createMenuLevels(value)}
        </ul>
      );
    });
    return <div>{levelKeys}</div>;
  };

  handleDisplayNextLevel = key => {
    this.setState(prevState => ({
      objectKey: {
        ...prevState.objectKey,
        [key]: !this.state.objectKey[key]
      }
    }));
  };

  initializeTK = level => {
    Object.entries(level).map(([key, value]) => {
      const newTemp = this.state.tempKey;
      newTemp.push(key);
      this.setState({ tempKey: newTemp });
      this.initializeTK(value);
    });
  };

  initializeOK = () => {
    const { tempKey } = this.state;
    let tempObject = {};
    tempKey.forEach(tempKey => {
      tempObject[tempKey] = true;
    });

    this.setState({ objectKey: tempObject });
  };

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

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

createMenuLevels=level=>{
const{objectKey}=this.state；
const levelKeys=Object.entries（level.map）（[key，value]）=>{
返回(

this.handleDisplayNextLevel（key）}>{key}
{objectKey[key]&&this.createMenuLevels（value）}

);
});
返回{levelKeys}；
};
handleDisplayNextLevel=键=>{
this.setState（prevState=>({
objectKey：{
…prevState.objectKey，
[key]：！this.state.objectKey[key]
}
}));
};
initializeTK=级别=>{
Object.entries（level.map）（[key，value]）=>{
const newTemp=this.state.tempKey；
新时推（键）；
this.setState（{tempKey:newTemp}）；
此参数为.initializeTK（值）；
});
};
初始化OK=（）=>{
const{tempKey}=this.state；
让tempObject={}；
tempKey.forEach（tempKey=>{
tempObject[tempKey]=true；
});
this.setState（{objectKey:tempObject}）；
};
componentDidMount（）{
axios.get（“https://www.ifixit.com/api/2.0/categories）然后（响应=>{
this.setState（{devices:response.data}）；
});
const{devices}=this.state；
这是指初始化（设备）；
this.initializeOK（）；
这个.setState（{devices}）；
}
render（）{
const{devices}=this.state；
返回{this.createMenuLevels（devices）}；
}
}

这是它现在看起来的样子，但我希望它能让领带和雨伞这样的项目没有箭头，因为这些项目中没有更多的数据要显示

---

您可以从createMenuLevels检查映射循环中的值是否为空，并根据该信息构造div

createMenuLevels = level => {
const { objectKey } = this.state;
const levelKeys = Object.entries(level).map(([key, value]) => {
//check here if childs are included:
var arrow = value ? "<FontAwesome name='angle-right'/>" : "";
return (
    <ul key={key}>
      <div onClick={() => this.handleDisplayNextLevel(key)}>{key} {arrow} </div>
      {objectKey[key] && this.createMenuLevels(value)}
    </ul>
  );
});
return <div>{levelKeys}</div>;
};

createMenuLevels=level=>{
const{objectKey}=this.state；
const levelKeys=Object.entries（level.map）（[key，value]）=>{
//检查此处是否包含儿童：
变量箭头=值？”：“”；
返回(

this.handleDisplayNextLevel（key）}>{key}{arrow}
{objectKey[key]&&this.createMenuLevels（value）}

);
});
返回{levelKeys}；
};

---

不只是检查是否设置了值，您可以检查它是否是一个数组，其中包含：

array.isArray（value）

您需要知道节点是否有子节点，与树一起工作时，它应该是obious的stuctures@xadm很抱歉，我对Javascript非常陌生，所以我不知道该怎么做如果我理解正确，你可以这样做：

{Object.keys（objectKey[key]）.length&}

@Walk谢谢！我能够将你的建议与vkrn的结合起来，并使其发挥作用。非常感谢！！非常感谢。我知道您正在尝试做什么，但出于某种原因，它仍然会在每个元素的末尾添加一个箭头。我处理的数据都是对象中的对象（没有数组），这可能与此有关吗？如果是这样，我能做什么改变？@sarah empty object仍然是一个真实的值。您可以使用

Object.keys

检查它里面是否有钥匙。@Walk我知道了，谢谢！我以为Object.keys仍然是一个对象，但它返回一个数组。